Visually Hidden – Radix Primitives

Hides content from the screen in an accessible way.

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 * as VisuallyHidden from '@radix-ui/react-visually-hidden';

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

Basic example

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>
);

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.

PreviousSlot

Edit this page on GitHub.

Overview

Guides

Components