Loading navigation…
User
API and Development
Accordion groups content into collapsible sections that users can expand or collapse on demand. It offers three visual variants and supports single or multiple expansion to organize content efficiently.
Name | Type | Default | Description |
|---|---|---|---|
|
| — | Optional CSS class name for custom styling |
|
| — | Whether the accordion can be collapsed after being expanded Not applicable for multiple; disallow usage |
|
| — | The value of the accordion that should be expanded by default The values of the accordion that should be expanded by default |
|
| — | Ref for the accordion root element |
|
| — | Type of accordion - 'single' allows only one item to be open Type of accordion - 'multiple' allows multiple items to be open simultaneously |
|
| — | Visual styling variant of the accordion |
Interactive examples and edge cases for this component are in Storybook.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Stable id for the item. |
|
|
| Custom classes. |
|
|
|
|
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Custom classes. |
|
|
| Header label and icons. |
|
|
| Optional extra click handling. |
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Custom classes. |
|
|
| Expanded body content. |
With the strongest visual structure, this variant offers clear separation with borders and background color.
Use for a subtle look with minimal chrome on collapsed items—ideal for reducing visual weight while preserving hierarchy.
Use for text‑forward layouts with simple dividers between item, particularly amidst dense, text‑heavy content.
Use when only one section should be open at a time. Great for FAQs, settings panels, and any context where focus should remain on a single area.
Use when users may need to compare or reference several sections at once, such as forms and filters.