Components / Layout
Accordion
stableCollapses long, categorised content — used for FAQs, and to group AI Design Guardrail checklists by category.
Default
Headings never exceed weight 600.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
items | { title: string; content: ReactNode }[] | — | Yes | Sections, in order. |
defaultOpen | number[] | [0] | No | Indexes open on first render. |
Do
- Open the first section by default so the pattern is discoverable.
- Keep each section title short enough to scan without opening it.
Don't
- Nest an accordion inside another accordion.
- Hide content inside an accordion that a user needs to complete a required task — that belongs inline.