@chakra-ui/visually-hidden
The visually hidden component styles itself so that it’s content is not visible, but it is available to assistive technologies like screen readers and other text to speech programs.
Installation
yarn add @chakra-ui/visually-hidden
# or
npm i @chakra-ui/visually-hidden
Import component
import { VisuallyHidden } from "@chakra-ui/visually-hidden"
Basic usage
// it renders a `span` by default
<VisuallyHidden>This content will be hidden on screen</VisuallyHidden>
// for visually hidden input fields
<VisuallyHiddenInput type="checkbox" defaultChecked/>