---
title: Visually Hidden
description: Screen-reader-only content wrapper
visibility: guest
draft: false
---

# Visually Hidden

A screen-reader-only wrapper that hides content visually while keeping it accessible to assistive technology. Equivalent to Tailwind's `sr-only` class.

## Basic Usage

:::preview{title="Visually hidden text with visible button"}
<x-wirekit::button intent="neutral" surface="ghost">
    <x-wirekit::icon name="close" class="h-5 w-5" />
    <x-wirekit::visually-hidden>Close dialog</x-wirekit::visually-hidden>
</x-wirekit::button>
:::

## With Icon Button

Common pattern: icon-only buttons with a hidden accessible label.

:::preview{title="Icon button with hidden label"}
<x-wirekit::row gap="sm">
    <x-wirekit::button intent="neutral" surface="ghost">
        <x-wirekit::icon name="edit" class="h-5 w-5" />
        <x-wirekit::visually-hidden>Edit</x-wirekit::visually-hidden>
    </x-wirekit::button>
    <x-wirekit::button intent="neutral" surface="ghost">
        <x-wirekit::icon name="info" class="h-5 w-5" />
        <x-wirekit::visually-hidden>Help</x-wirekit::visually-hidden>
    </x-wirekit::button>
</x-wirekit::row>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | string | `'span'` | HTML element to render |
| `scope` | string\|null | `null` | Scoped personalization name |

## Accessibility

This component uses the `sr-only` technique to visually hide content while keeping it in the accessibility tree. It's essential for:

- Icon-only buttons that need accessible labels
- Skip navigation links
- Form labels that are visually implied by context
- Status messages for screen readers

## Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.