Accordion
An accordion shows and hides sections of related content.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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[] | None | 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 button that reports whether its section is open, so screen readers announce the state.
- The content is linked to its title, so screen readers read it in the right place.
- Content in an accordion is hidden by default, so do not put anything essential in one.