Source: https://monarchui.dev/components/visually-hidden/

Components · Layout

# VisuallyHidden

Screen-reader-only text.

@rookcom/monarch-react

Component

## Screen-reader-only text

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

Hides content visually while keeping it available to assistive technology.

### Use when

- Adding context a sighted user gets from layout, e.g. "changes to the ticket" after "Save".

### Avoid when

- Hiding content from everyone: use `hidden`.
- Naming an icon-only button: use IconButton `label`.

## Design principles

- Its class `.mn-visually-hidden` is a foundation utility (styles/foundation.css) that other components also use.

## API reference

```tsx
import { VisuallyHidden } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `VisuallyHidden` | component | server-safe | `.mn-visually-hidden` |

Renders a `<span>`; native attributes pass through.

Generated from the TypeScript declarations of `packages/react/src/components/layout/visually-hidden`.

## Properties

### `VisuallyHidden`

Hides content visually while keeping it available to assistive technology.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

## Variants

VisuallyHidden has no variants.

## States

No states: it renders static content.

## Interaction behaviour

Not interactive.

## Keyboard support

Not interactive, so there is no keyboard behaviour.

## Accessibility

- Text stays in the accessibility tree and contributes to the accessible name of its parent.

## Responsive behaviour

- Always 1px and clipped at every width.

## Theme support

- Not visible, so themes do not apply.

## Do and don't

### Do

- Use it to complete a visible label that relies on context.

### Don't

- Do not hide focusable elements with it.

## Related components

- [Button](https://monarchui.dev/components/button/): IconButton `label` names icon-only buttons.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | None |
| Monarch components | None |

## Testing coverage

- Keeps text in the accessible name of its parent button.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/layout/visually-hidden`

## All example code

### Screen-reader-only text

```tsx
import { Button, VisuallyHidden } from '@rookcom/monarch-react';

<Button>
  Save <VisuallyHidden>changes to the ticket</VisuallyHidden>
</Button>
```