Luke UI
GitHub repository

Visually Hidden

Hide content visually and keep it available to assistive technology.

StorybookSourceView as MarkdownEdit on GitHub

Use VisuallyHidden to hide content from sight. The content stays in the accessibility tree and the document flow. Screen readers still announce it, and aria-labelledby or aria-describedby can reference it. Unlike display: none or the hidden attribute, VisuallyHidden does not remove the content from assistive technology.

Reach for it when the interface conveys meaning visually but needs a text equivalent. Examples include a label behind an icon-only control, extra context for a link, and a status message inside a live region.

Visually Hidden — Basic
Open in playground

Rated 4 out of 5 stars

Render a different element

By default VisuallyHidden renders a span. Pass elementType to render a different element, such as a semantic heading, label, or list item. VisuallyHidden keeps the hidden styles on that element.

<VisuallyHidden elementType="h2">Search results</VisuallyHidden>

API

VisuallyHiddenProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Box

A layout element with responsive Luke UI layout properties.

Blockquote

Block-level quotation from another source.

On this page

Render a different elementAPI