Skip to content
comp0

comp0

Actions

Visually Hidden

Extra words that screen readers can hear but sighted people do not see.

When to use it: Use it for helpful context that would make the visible screen noisy.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Visually Hidden.tsxtsx
import { VisuallyHidden } from "@comp0/react";

export function Example() {
  return (
    <button
      type="button"
      className="rounded bg-teal-700 px-3 py-2.5 text-base text-white sm:py-2 sm:text-sm dark:bg-teal-400 dark:text-zinc-950"
    >
      Notifications <VisuallyHidden>(3 unread)</VisuallyHidden>
    </button>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. VisuallyHidden

    Wrapper that hides children visually but keeps them available to assistive technology. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Write the missing context first.

  2. 2

    Add the supporting parts

    Wrap only that extra text.

  3. 3

    Make the behavior clear

    Keep the visible control and its normal label visible.

    Exampletsx
    <VisuallyHidden>Loading messages</VisuallyHidden>

Keyboard

Forms and accessibility

No form behavior.

Accessibility checklist

  • Use it for extra context, not to hide essential visible instructions.
  • Do not accidentally hide the only focusable control.
  • Keep hidden text short and useful.

API reference

Importtsx
import { VisuallyHidden } from "@comp0/react";

VisuallyHidden

DOM element

Wrapper that hides children visually but keeps them available to assistive technology.

PropTypeDescription
focusablebooleanReveals the content while it or a descendant has focus, as a skip link does.

Keep exploring