build69
Sign inGet API key
build69  /  Components  /  Layout & Surfaces  /  VisuallyHidden

VisuallyHidden

v1.0.1Updated 20 Jul 2026

Screen-reader-only content primitive: renders children in an sr-only span (or merges onto your own element via Radix Slot asChild). A focusable mode reveals the content as a small token-styled pill while focused — the sk

View source← Back to catalog

Preview

Live · 6 stories
DefaultOpen ↗
▸Why this is recommendeda11yaccessibilitysr-onlyscreen-reader+3

The default, out-of-the-box VisuallyHidden.

Recommended for+14
  • ✓Accessible labels for icon-only buttons
  • ✓Invisible headings that keep the document outline
  • ✓Skip-to-content links as the first tab stop
  • ✓Extra screen-reader context on data cells
Tags+6
a11yaccessibilitysr-onlyscreen-readerskip-linkradixdefault
Features+4
  • sr-only span by default
  • asChild via Radix Slot (merge onto <h2>, <a>, <button>, …)
  • focusable mode: reveals as a fixed focus pill (skip-link pattern)
  • SkipLink convenience component (first-tab-stop skip navigation)
  • focus-within based reveal covers both self-focus and focusable descendants
  • Design tokens only; SSR-safe
Not recommended for−2
  • ✕Hiding content from everyone (use conditional rendering)
  • ✕Visual truncation (use truncate / line-clamp)
  • ✕Tooltips (use Tooltip)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "VisuallyHidden" })

Usage

import { VisuallyHidden, SkipLink } from '@/components/primitives/visually-hidden';

<SkipLink href="#main-content">ข้ามไปยังเนื้อหาหลัก</SkipLink>
<button><Trash2 /><VisuallyHidden>ลบใบแจ้งหนี้ INV-2026-0042</VisuallyHidden></button>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
asChild

Merge props onto the immediate child via Radix Slot instead of rendering a span

boolean—
focusable

Reveal as a focus pill while the element (or a descendant) has focus — skip-link mode

boolean—
href

SkipLink only: jump target, e.g. "#main-content" (target should have tabIndex={-1})

stringyes

Related

Platform docsAll componentsSource files