Accordion
Accordions are most often used for hiding and showing groups of similar content.
Overview
Stacking multiple Accordions is a useful way to save space in the interface. Accordions should not contain primary actions like share, save, etc. Accordions can contain helper icons, have containing borders, or have a more minimal styling.
Accordions can have different selection modes, where users can have multiple or single Accordion Item(s) open.
Usage
- To organize related information.
- To shorten pages and reduce scrolling when content is not crucial to read in full.
- When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.
Sample
Best practices
Individual Accordion Item components can be used to house content. Since an individual Accordion Item can at times be collapsed, ensure no crucial information or controls are contained inside.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next non-disabled calcite-accordion-item. If the currently focused step is the last step, the focus will leave the component. |
Tab and Shift | Moves focus to previous non-disabled calcite-accordion-item. If the currently focused step is the first step, the focus will leave the component. |
Enter | Toggles the expansion of the selected calcite-accordion-item. |
Space | Toggles the expansion of the selected calcite-accordion-item. |