Skip to main content

Accordion

Component
Live

The Accordion component allows users to show and hide sections of content.

FigmaCode

Usage​

Accordions are vertically stacked sections that collapse and expand to reveal content. People can select which content section to reveal (or hide) by clicking on section headings. Heading are also accompanied by a chevron icon which indicates the open or close status of the section.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Accordion } from "@iag/chroma-react-ui.components";

When to use​

Use Accordions when you have multiple related sections of content that are optional, supplemental, or related. This allows the end-user to explore at their discretion.

When to avoid​

Avoid using Accordions for essential content that must always be visible, as users might miss it. This may include legal content or Terms and Conditions (T&Cs). Also avoid accordions to hide lengthy content. Consider if the content can be simplified, restructured or redesigned instead.

Do

  • Do use descriptive headings to improve content navigation and discovery.
  • Do consider if a section should be expanded on load for commonly accessed information.

Don't

  • Don’t use to hide lengthy content. Consider content simplification or redesign first.
  • Don’t use for content that must always be visible or is crucial to the user task.

Collapse/Expand All​

A collapse all/expand all function can be added to a group of accordions if users may need to open a access content in a large number of accordions. This can reduce time and clicks for the user.

References​