# VisuallyHidden

- Page: https://jiguang132.com/resources/astryx/docs/visually-hidden
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-reader context. Deliberately has no styling props; the whole point is to stay invisible.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## VisuallyHidden

Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-reader context. Deliberately has no styling props; the whole point is to stay invisible.

| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode |  | Content exposed to assistive technology while hidden from sight. |
| as | ElementType | 'span' | HTML tag to render as. Use a block element for live regions. |

### Usage guidance

- Use to give icon-only buttons and controls an accessible name that screen readers announce.
- Render as a block element (as="div") with aria-live to announce dynamic updates like drag-and-drop or result counts.
- Avoid: Use it to hide content from everyone; it stays in the accessibility tree; use conditional rendering or `hidden` to remove content entirely.
- Avoid: Put interactive controls inside it; the content is not visible and cannot receive pointer input.


## Examples

- VisuallyHidden: 
- VisuallyHidden — Live Region: A polite aria-live region announces visual-only state changes to assistive technology.
- VisuallyHidden — Structural Heading: Give a visually implicit section an accessible name so screen-reader users can navigate to it.
- VisuallyHidden — Supplementary Context: Add screen-reader-only context to terse visual data, like spelling out what a trend arrow means.

## Complete example dependencies

Some examples import optional icons. The per-example install command in the examples list identifies exactly what that example needs. For all examples on this page:

```bash
npm install @heroicons/react@2.2.0
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt