Visually Hidden – Radix2Solid

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Hides content from the screen in an accessible way.

Features

Visually hides content while preserving it for assistive technology.

Anatomy

Import the component.

import { VisuallyHidden } from "@radix-solid/primitives";
export default () => <VisuallyHidden.Root />;

Basic example

Use the visually hidden primitive.

import { VisuallyHidden } from "@radix-solid/primitives";
import { GearIcon } from "@radix-solid/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.

Prop	Type	Default
`asChild`	`boolean`	`false`

Accessibility

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