Accordion

Navigation · src/components/Accordion/Accordion.tsx

Sections that open one at a time, for content most readers will skip.

Right for a FAQ or a long settings page; wrong for anything a reader needs to compare, and wrong for anything they must not miss - collapsed content is content most people never see, and it is invisible to a page search.

The panel is hidden rather than removed, so its text stays findable in the DOM, and it keeps a region role labelled by its own trigger so a screen reader can tell which section it landed in.

Import

import { Accordion } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
items	AccordionItem[]
multiple	boolean	Allow several open at once. One at a time by default.
defaultOpen	string | string[]	Id, or ids, open on first render.
className	string

Exported types

AccordionItem