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

KeyFunction
TabMoves 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 ShiftMoves focus to previous non-disabled calcite-accordion-item. If the currently focused step is the first step, the focus will leave the component.
EnterToggles the expansion of the selected calcite-accordion-item.
SpaceToggles the expansion of the selected calcite-accordion-item.

API reference

Properties

Slots

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.