Accordion
Vertically stacked, collapsible content sections
Category: navigation · WCAG 2.2-AA · navigation, collapse, disclosure
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | single | Whether one or multiple sections can be open at once ('single' | 'multiple'). |
defaultValue | string | string[] | — | The initial value when uncontrolled. |
value | string | string[] | — | The controlled value. |
onValueChange | (value: string | string[]) => void | — | Called with the new value when it changes. |
Design tokens
--cascivo-color-border--cascivo-color-bg-subtle--cascivo-color-text--cascivo-radius-md--cascivo-focus-ring
When to use
- Progressively disclosing sections of related content the user reads top to bottom
- Reducing vertical scroll when most sections stay collapsed (FAQs, settings groups)
- Allowing multiple sections open at once (type="multiple")
When not to use
- Switching between mutually exclusive, equally important views — use Tabs
- A single show/hide region — a plain disclosure is enough
How to build an accessible Accordion in React →
Examples
Single
<Accordion type="single" defaultValue="a"><AccordionItem value="a"><AccordionTrigger>Section</AccordionTrigger><AccordionContent>…</AccordionContent></AccordionItem></Accordion>Related components
- Tabs — Tabs switch between peer views; Accordion stacks sequential sections vertically