An Accordion is an interactive heading that can be collapsed and expanded to hide and reveal content. It can be used as a single Accordion or as multiple stacked Accordions. It can be used with or without a border.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Top border |
Used in the bordered accordion variant to visually separate the accordion from other content. |
Yes |
|
2. Chevron - closed |
Indicates that an accordion is closed and its content is hidden. |
No |
|
3. Title |
Heading that concisely describes the content within the accordion. |
No |
|
4. Chevron - open |
Indicates that an accordion is open and its content is displayed. |
No |
|
5. Content |
Area to nest content. |
No |
|
6. Bottom border |
Used in the bordered accordion variant to visually separate the accordion from other content. If using bordered accordions, the last accordion in a stack (or the individual accordion if using only one) must have a bottom border. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | rest | hover | focus | rest |
| isOpen Variant | false | true | false |
| ✏️ title Text | string | Accordion title |
| hasBorder Variant | false | true | false |
| ↳ isLastItem Variant | false | true | false |
Component dependencies
This component is internally dependent on the following components:
System Icons
Divider
A vertical or horizontal line that separates or groups content in lists and layouts.
Help and support