Visually Hidden

Import#

Chakra UI exports 2 components for the VisuallyHidden.

VisuallyHidden: Visually hidden span component used to hide elements on screen. VisuallyHiddenInput: Visually hidden input component used for designing custom input components using the html input as a proxy

import { VisuallyHidden, VisuallyHiddenInput } from '@chakra-ui/react'

Usage#

It is used to visually hide an element but to make it accessible for screen-readers. It renders html <span> as a proxy.

Here is another example:

Visually hidden input#

It renders html <input> as a proxy.

Accessibility#

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

Props#

VisuallyHidden components doesn't have any custom props.