Accordions are most often used for hiding and showing sections of related content.
Overview
Accordions can have different selection modes, where users can have multiple or single Accordion Item(s) open.
Usage
- To organize related text-based information.
- To shorten pages and reduce scrolling when content is not crucial to read in full.
Sample
Best practices
While similar to a Block, Accordions are not intended to be used within within a Panel.
Accordion is best suited to containing narrative or text-heavy content in the main interactive area of an application, whereas Block is recommended for displaying interactive controls and elements within a Panel.
Try to avoid placing interactive controls or elements that affect an application state or display within Accordion. These should instead be placed within one or more Block(s). However, in certain instances, it may be appropriate to place interactive controls or form-based elements inside an Accordion - for example, when located within the main content area of a Settings page.
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. |