Visually Hidden

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

AI TipWant to skip the docs? Use the MCP Server

Usage

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