Visually Hidden
Used to hide content visually but keep it accessible to screen readers.
AI TipWant to skip the docs? Use the MCP Server
import { Button, VisuallyHidden } from "@chakra-ui/react"
import { LuBell } from "react-icons/lu"
const Demo = () => {
return (
<Button>
<LuBell /> 3 <VisuallyHidden>Notifications</VisuallyHidden>
</Button>
)
}
Usage
import { VisuallyHidden } from "@chakra-ui/react"<VisuallyHidden>Hidden content</VisuallyHidden>Examples
Input
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"
const Demo = () => {
return (
<HStack>
The input is hidden
<VisuallyHidden asChild>
<input type="text" placeholder="Search..." />
</VisuallyHidden>
</HStack>
)
}