VisuallyHidden

VisuallyHidden hides its children visually, while keeping content visible to screen readers.

import {VisuallyHidden} from 'react-aria';

<VisuallyHidden>I am hidden</VisuallyHidden>

Positioning

VisuallyHidden is positioned absolutely, so it must have a position: relative or position: absolute ancestor. Otherwise, undesired scrollbars may appear.

API

VisuallyHidden

Name	Type	Default
`children`	`ReactNode`	Default: —
The content to visually hide.
`elementType`	`string \| JSXElementConstructor<any>`	Default: `'div'`
The element type for the container.
`isFocusable`	`boolean`	Default: —
Whether the element should become visible on focus, for example skip links.
`id`	`string \| undefined`	Default: —

useVisuallyHidden

For additional rendering flexibility, use the useVisuallyHidden hook . It supports the same options as the component, and returns props to spread onto the element that should be hidden.

useVisuallyHidden(props: VisuallyHiddenProps): VisuallyHiddenAria

Example

See useRadioGroup and useCheckbox for examples of using VisuallyHidden to hide native form elements visually.