Skip to main content

Accordion

Create a vertically stacked list of headers to expand and collapse section content.

View in StorybookExternal link icon

Behavior​

  • The accordion expands and collapses when users select the chevron or title.
  • The accordion is also available in a disabled state.

Usage​

The accordion size accommodates its typography. Use the appropriate size to establish a visual page hierarchy:

  • Enable users to view only the content they want to see instead of displaying all of it at once.
  • Reduce scrolling when the content is not too important to read in full.
  • Make pages less daunting and overwhelming.

Spacing​

Size S​

Size M​

Size L​

Size XL​

Size 2XL​

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the chevron's visual hover state and adds a 2px ring to the whole Accordion's header.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Accordion Pattern (Sections With Show/Hide Functionality) for guidance on expected keyboard interactions, including roles, labels, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.