Visually Hidden

<Description>Hides content from the screen in an accessible way.</Description>

<Highlights features={[ "Visually hides content while preserving it for assistive technology.", ]} />

Installation

Install the component from your command line.

npm install @radix-ui/react-visually-hidden

Anatomy

Import the component.

import { VisuallyHidden } from "radix-ui";

export default () => <VisuallyHidden.Root />;

Basic example

Use the visually hidden primitive.

import { VisuallyHidden } from "radix-ui";
import { GearIcon } from "@radix-ui/react-icons";

export default () => (
	<button>
		<GearIcon />
		<VisuallyHidden.Root>Settings</VisuallyHidden.Root>
	</button>
);

API Reference

Root

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

/>

Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.