Hides content from the screen in an accessible way.
Visually hides content while preserving it for assistive technology.
Install the component from your command line.
npm install @radix-ui/react-visually-hidden
Import the component.
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
export default () => <VisuallyHidden.Root />;
Use the visually hidden primitive.
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
import { GearIcon } from '@radix-ui/react-icons';
export default () => (
<button>
<GearIcon />
<VisuallyHidden.Root>Settings</VisuallyHidden.Root>
</button>
);
Anything you put inside this component will be hidden from the screen but will be announced by screen readers.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.