Visually Hidden

Hides content visually while keeping it accessible to screen readers.

@sigil-ui/componentsReact

Renders content that is invisible on screen but remains in the accessibility tree for screen readers.

Installation

npx @sigil-ui/cli add visually-hidden

import { VisuallyHidden } from "@sigil-ui/components";

<VisuallyHidden>This text is only for screen readers</VisuallyHidden>

<label>
  <VisuallyHidden>Email address</VisuallyHidden>
  <Input type="email" placeholder="email@example.com" />
</label>

<DialogTitle>
  <VisuallyHidden>Confirm deletion</VisuallyHidden>
</DialogTitle>

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Content to hide visually