VisuallyHidden

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

chakra ui pro

Import#

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

Usage#

function Example() {
return (
<Button>
<VisuallyHidden>Checkmark</VisuallyHidden>
<CheckIcon />
</Button>
)
}

Another Example

function Example() {
return (
<Box>
<Heading>Title and description</Heading>
<VisuallyHidden>This will be hidden</VisuallyHidden>
</Box>
)
}

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

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel