Skip to main content

Foundations

VisuallyHidden

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

Curated demo

Reference

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

  • 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.

Props

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

Example snippet

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