Skip to main content

Accordion

An accordion is an interactive element that organises and displays content in a collapsible and expandable way.

Dos and Don'ts

Do
  • Use to organise related information.
  • Use to shorten pages and reduce scrolling when content isn't crucial to read in full.
Don't
  • Don't use if the quantity of the content within the Accordion is too large, consider Tabs instead.

Anatomy

Anatomy of a accordion component showing numbered elements including icon, primary text, secondary text, chevron, divider and slot.
  1. Icon (Optional): Non-interactive icon that can be used to visually support the primary text.
  2. Primary Text: Informs the user the type of content contained within the Accordion.
  3. Secondary Text (Optional): Provides additional detail if required, aiming to be contained within two lines.
  4. Chevron: Indicates whether the Accordion is open or closed.
  5. Divider (Optional): Helps visually defining the end of a list item and the beginning of the next one.
  6. Slot: Allows for adding content directly into the component.

Variants

Default

Accordion in default variant.

Modifiers

Leading icon

When incorporating an icon into an Accordion, it is essential to ensure that the icon clearly connects to the content of the Accordion, helping reinforce the Accordion's purpose.

Accordion with a leading icon.
Do
Accordion with a meaningful icon that relates with the content.
Don't
Accordion with improper generic icon.

Secondary text

Used for Accordions that require an additional secondary line of information to provide clarity to the user.

Accordion with a secondary line of information.

Divider

By default the divider is used, with the exception of the last Accordion in a stack to signify the end of the section.

Accordions with dividers between each instance.

Expanded content

The accordion component includes a content slot in its expanded variant, allowing designers to insert their own content directly into the component. For guidance on working with slots in Figma, please refer to the Figma Slot Guidance.

Accordion in expanded state with a content slot.

Emphasis on primary text

Prominent

Used when the category title needs to be prominent on the page.

Accordion with wide default (prominent) emphasis.

Low emphasis

Used when the category title doesn't need to be highly prominent.

Accordion with wide low emphasis.

Behaviours

States

The Accordion has states, collapsed and expanded. The chevron pinned right of the Accordion indicates which state it is in. The chevron points down to indicate collapsed, and up to indicate expanded.

Accordions, by default are collapsed with all content panels closed. Starting in the collapsed state allows the user a high level overview of the available information.

Collapsed

Accordion in collapsed state.

Expanded

Accordion in expanded state.

Multiple accordions open at once

Accordions expand independently allowing multiple Accordions to be open at once.

Multiple accordions open at once.

Overflow

When the content is too long to fit in one line, both the Primary and Secondary text should wrap into a new line.

Accordion with overflowing primary and secondary text wrapping to a new line.

Interactions

The whole container is interactive to expand or collapse the Accordion.

Accordion interaction example showing the clickable container area.
Accordion interaction example showing expanded content.

Overrides

Padding

The accordion component supports padding overrides on both the trigger (the top bar containing the title and toggle icon) and the content slot (the expanded area below). Both can be adjusted independently to suit layout requirements.

Accordion with padding overrides applied.

Corner radius

The corner radius of the accordion can be overridden to align with the surrounding layout or surface it is placed on.

Accordion with corner radius override applied.

Content

Do
  • Keep primary text concise and focused, ensuring it remains clear and descriptive enough to communicate the intended message.
  • Use sentence-style capitalisation (only the first word in a phrase and any proper nouns capitalised).
Don't
  • Don't use lengthy or complex text for primary text; keep labels concise and scannable.
  • Don't use title case or all caps capitalisation for labels or descriptions.

Interactive States

Outlines the atomic level interactive elements for the component.

Default

Accordion in the default state.

Active

Accordion in the active state.

Examples

LTR Examples

Here are some examples of Accordions in LTR context:

Accordion in LTR context, first example.
Accordion in LTR context, second example.

RTL Examples

Here are some examples of Accordions in RTL context:

Accordion in RTL context, first example.
Accordion in RTL context, second example.

Accessibility

Text scaling

When a user activates the accessible text scaling options on their device, both the primary and secondary text should scale (and wrap into a new line if needed) to accommodate the new text size.

Accordion with text scaling applied.

Zoom

If the user zooms their screen up to at least 200%, all items in the component should scale accordingly.

Accordion with zoom applied.

Screen reader support

iOS

Name: Primary text Trait: N/A Type: N/A Available actions: Expand, Collapse

Example of the Accordion with iOS Voice Over turned on.

Android

State: Expanded, Collapsed Content description: Primary text, Secondary text Type: N/A Actions: Double tap to activate

Example of the Accordion with Android TalkBack turned on.
Back to top