VisuallyHidden

VisuallyHidden is a common techinique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.

Import#

import { VisuallyHidden } from "@chakra-ui/react"

Usage#

Editable Example

Another Example

Title and description

This will be hidden
Editable Example

Accessibility#

VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.


Props#

This component doesn't have any custom props.

NameTypeDescription
childrenReact.ReactNodeThe content to be hidden visually
Edit this page