Accordion
An accordion shows and hides sections of related content.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Accordion } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| sections * | readonly AccordionSection[] | — | The sections in order. Each takes an id, a title, its content and whether it starts open. |
Accessibility
What the component does for you, and what it needs from you.
- Each title is a real button reporting whether its section is open, so the state is announced rather than only drawn.
- The content is tied to its title, so it is read in place.
- Because content is hidden by default, an accordion is a content decision first. Anything essential should not be in one.