# VisuallyHidden

Hide content visually while keeping it available to screen readers. Perfect for icon-only controls that still need a real name.

## Notes

- Use VisuallyHidden for accessible names or context that should be available to assistive tech without adding visual clutter.
- Do not use it to hide content that should be discoverable by sighted users.
- Prefer visible labels for form fields; this primitive is for compact controls and supplemental context.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| as | `'span' | 'div'` | 'span' | Rendered element. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<button>
  <span aria-hidden="true">🔍</span>
  <VisuallyHidden>Search documentation</VisuallyHidden>
</button>
```