An accordion enables users to expand and collapse sections of content.
Example: Multi-section
⌘ Cmd + ⌥ Option + 1
Properties
"AccordionSection" Component
| property | propType | required | default | description |
|---|---|---|---|---|
| _isSelected | bool | - | - | |
| _onClickHandler | func | - | - | |
| children | node | yes | - | |
| testSection | string | - | - | |
| title | string | yes | - |
"Accordion" Component
| property | propType | required | default | description |
|---|---|---|---|---|
| initiallySelected | number | - | 0 | |
| children | node | [node] | yes | - | |
| testSection | string | - | - |
Usage
Accordions are best used when users need to consume specific areas of content within a page or when vertical space is limited. Use Accordions when there is enough content to condense. Avoid nested Accordions because it increases the cognitive load for users. Users may have multiple Accordions open at the same time. The entire header area is clickable to expand or collapse the content below.
Best practices
Do
When you need to provide sectioned content
Don't
Use when there's very little content in each section