Visually hidden

Pro

Words for screen readers only: the name of a button drawn as an icon, or the rest of a sentence the page says by layout. They stay in the page and are read in place; nothing is drawn. With focusable, the content shows while it or something inside it has keyboard focus, which is how a skip link works.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2 and 4.1.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/visually-hidden

Brings in: tokens, utils · npm: @base-ui/react@^1.9.0

Usage

TSX · The example above

"use client"

import { X } from "lucide-react"
import { VisuallyHidden } from "@/components/candor/visually-hidden"
import { Button } from "@/components/candor/ui/button"

// An icon button named for screen readers, and a skip link that shows when it takes focus (press Tab).
export default function Example() {
  return (
    <div className="flex items-center gap-4">
      {/* oxlint-disable-next-line jsx-a11y/control-has-associated-label -- the words are the children */}
      <VisuallyHidden focusable render={<a href="#example-main" className="rounded-md bg-card px-3 py-2 text-sm shadow-raised" />}>
        Skip to content
      </VisuallyHidden>
      <Button variant="outline" size="icon">
        <X aria-hidden />
        <VisuallyHidden>Close the panel</VisuallyHidden>
      </Button>
      <p id="example-main" className="text-sm text-muted-foreground">
        Content
      </p>
    </div>
  )
}

<VisuallyHidden>

Prop	Type	Default	Description
focusable	`boolean \| undefined`	false	Shows the content while it, or a link or button inside it, has focus, so a keyboard user sees where they are: a "Skip to content" link. Without it, focusable content inside would be focused while unseen.
render	`useRender.RenderProp \| undefined`	—	The element to draw instead of a `<span>`: `render={<a href="#main" />}` for a skip link.
className	`string \| undefined`	—	Classes for the element, applied last; with `focusable`, style how it looks while shown.
children	`React.ReactNode \| undefined`	—	The words to read out.

Also takes the props of React.ComponentProps<"span">.