Description

A component allowing to visually hide HTML elements and their content. This is useful for example to have a <Sheet.Title /> or <Sheet.Description /> available for screen-readers users to describe a Sheet, while hiding them visually.

Sub-components

`<VisuallyHidden.Root />`

Required	yes
Underlying HTML element	`span`

Description

The root sub-component of the VisuallyHidden component.

asChild

Required	no
Value type	`boolean`
Default value	`undefined`

Values description

`true`	The underlying HTML element rendered is the child.
`false	undefined`

Description

Defines whether the sub-component underlying HTML element is the default one or the one passed as child of the sub-component.

Usage

If the child is a React component rendering a HTML element:

it must accept props and spread all received props onto the rendered HTML element;
it must use React.forwardRef() and pass the received ref to the rendered HTML element.

Notes