Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Visually Hidden

Used to hide content visually but keep it accessible to screen readers.

AI TipWant to skip the docs? Use our Agent Skills

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

Previous

Skip Nav

Next

Theme