VisuallyHidden

The @bento/visually-hidden package provides the VisuallyHidden component which renders content that is accessible to screen readers and other assistive technologies while being visually hidden from sighted users. This is a fundamental accessibility primitive that enables developers to provide additional context, instructions, or navigation aids without cluttering the visual interface.

This primitive is essential for implementing accessible patterns like skip links, screen reader-only form labels, additional context for interactive elements, and descriptive text that supplements visual cues. It serves as a building block for other accessible components throughout the Bento ecosystem and is consumed by form components, navigation systems, and any component requiring accessible hidden content.

Installation

npm install --save @bento/visually-hidden

Props

The following properties are available to be used on the VisuallyHidden component:

| Prop | Type | Required | Description | |------|------|----------|------------| | as | keyof IntrinsicElements | No | The element type to render the component as. Community standard (preferred) | | elementType | keyof IntrinsicElements | No | The element type for the container. @deprecated Use as instead. The element type to render the component as. For React Aria compatibility. | | slot | string | No | A named part of a component that can be customized. This is implemented by the consuming component. The exposed slot names of a component are available in the components documentation. | | slots | Record<string, object \| Function> | No | An object that contains the customizations for the slots. The main way you interact with the slot system as a consumer. |

Examples

Default

A simple usage of the VisuallyHidden component for a skip link button. The hidden text provides context for screen readers while the arrow icon provides a visual cue.

Custom Element

You can customize the rendered element type using the as prop. By default, VisuallyHidden renders a span element.