Accordion
Also known as: Expandable section, Disclosure
Resources
Properties
| Property | Values | Default |
|---|---|---|
Is open Boolean | true | false | false |
Size Variant | Sm | Md | Lg | Xl | Md |
Title Text | string | Title |
Has separator Boolean | true | false | true |
Swap content InstanceSwap | Any component | Text |
Best practises
- Use accordions to organize related content into collapsible sections.
- Keep section titles clear, users should understand what’s inside without expanding.
- Make the entire header area clickable to improve usability.
- Maintain content hierarchy, avoid nesting accordions inside each other.
- Avoid putting critical or required information inside accordions.
When to use
When presenting a lot of related content while keeping the interface compact.
Where users don’t need all the information at once but should have the option to expand details.
When user needs to browse grouped content selectively.
When users need to see everything at the same time.
If users need to compare multiple sections at once.
Note:
Instance swap allows using custom content in a component. Read about the feature from Figma learn.
Behaviour
Accordions expand and collapse content vertically when their headers are clicked. This allows to show or hide sections without navigating away. Accordion item will remain open until the user closes it. Typically, only one accordion item is open at a time. Accordion header is the trigger for expanding and collapsing.
Size
Dimensions of the accordion are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-height-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>