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> ) }