Visually Hidden
Used to hide content visually but keep it accessible to screen readers.
import { Button, VisuallyHidden } from "@chakra-ui/react"
import { LuBell } from "react-icons/lu"
export const VisuallyHiddenBasic = () => {
return (
<Button>
<LuBell /> 3 <VisuallyHidden>Notifications</VisuallyHidden>
</Button>
)
}
import { VisuallyHidden } from "@chakra-ui/react"<VisuallyHidden>Hidden content</VisuallyHidden>Using the asChild prop, you can pass a child element to the VisuallyHidden
component.
The input is hidden
import { HStack, VisuallyHidden } from "@chakra-ui/react"
export const VisuallyHiddenWithInput = () => {
return (
<HStack>
The input is hidden
<VisuallyHidden asChild>
<input type="text" placeholder="Search..." />
</VisuallyHidden>
</HStack>
)
}