Accordion
A vertically stacked set of collapsible sections. Built on Radix UI Accordion.
Single (one open at a time)
Usage
Use accordions to organize lengthy content into collapsible sections, reducing visual clutter while keeping content accessible.
Use "single" type when sections are independent, or "multiple" when users may need to compare sections side by side.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | — | Whether one or multiple items can be open |
| collapsible | boolean | false | Allow closing all items (single mode only) |
| value | string | string[] | — | Controlled open item(s) |
| onValueChange | (value) => void | — | Callback when open items change |