Skip to main content
VisibilityHidden renders a visually hidden span. Its content stays in the accessibility tree and can supply an accessible name. It has no state and accepts only children.

Usage

Use a visible label when space permits. For controls that already accept aria-label, that attribute is another way to supply an accessible name.

Hidden content

Place supporting text inside the wrapper. Avoid placing focusable controls inside it: the wrapper stays visually hidden when its children receive focus. It does not add a live region, remove content from assistive technology, or hide confidential data. The component does not forward id, className, or other native attributes. See accessibility for labeling and announcement patterns.

Props

ReactNode
required
Content hidden visually while remaining available to assistive technology.