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

# Visually Hidden

Hides content from the screen in an accessible way.

## Features

- Visually hides content while preserving it for assistive technology.

## Anatomy

Import the component.

```jsx
import { VisuallyHidden } from "@radix-solid/primitives";

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

## Basic example

Use the visually hidden primitive.

```jsx
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`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

## Accessibility

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