Accordion
The accordion component is a vertical stack of interactive headers used to group related content into collapsible sections, allowing users to expand or hide content based on their needs or preferences. It enhances the user experience by organizing information into smaller, digestible chunks, helping reduce cognitive load and save screen space.
The accordion component is designed to present large amounts of content in a small space by leveraging progressive disclosure. It helps improve the user experience by breaking down information into manageable sections, allowing users to focus only on what they need.
- 1.Header: serves as the trigger for expanding or collapsing the section. It acts as a summary of the content, allowing users to decide if they want to interact with it.
- 2.Content area: the expanded section where detailed information or functionality resides.
- 3.Title: a concise and descriptive label that summarizes the content of the accordion section. It helps users understand what type of information they can expect to find inside.
- 4.Chevron icon (Expand/collapse): A visual indicator of the accordion's current state (expanded or collapsed). It provides an affordance for interaction and ensures users can toggle the accordion intuitively.
- 5.Left secondary element (Optional): Provides additional context or enhances the user experience. Only one of the following can be used per accordion section to avoid visual clutter:
- Icon: Adds visual context or aids recognition by representing the content type or purpose of the section.
- Badge: Displays supplemental information, such as a notification count or status, to give users a quick overview of the section.
- 6.Sublabel (Optional): Offers additional context or instruction.
- 7.Right secondary element (Optional): Also limited to one element per section. May include:
- Helper text: Offers supporting guidance or content summary.
- Status light: A visual status indicator (e.g., completed, in progress, error).
- Badge: Similar to the left badge, positioned right for layout flexibility.
The accordion component has two main states: collapsed and expanded. The chevron icon at the end of the accordion indicates which state the accordion is in. Accordions begin by default in the collapsed state with all content panels closed. Starting in a collapsed state gives the user a high level overview of the available information.
The accordion component can be configured to allow either multiple sections to be open simultaneously or limit the user to a single-open section at a time. Each approach has specific use cases, but it's important to prioritise user needs and content hierarchy when deciding which behavior to implement.
- Allow multiple sections open
This approach gives users full control over the visibility of content, allowing them to open or collapse multiple sections at the same time. It's particularly useful when:
- Users need to compare or reference information across different sections simultaneously.
- The content in each section is independent and doesn't require strict linear navigation.
- There is enough vertical space to accommodate multiple expanded sections without overwhelming the layout.
- Single-open behavior
Some implementations restrict the accordion to allow only one section to be open at a time. When a user expands a new section, the previously expanded section collapses automatically. This pattern is suitable when:
- The content is closely related or mutually exclusive, making it logical to view only one section at a time.
- Vertical space is limited, and having multiple sections open could cause usability or layout issues.
- A simplified and more guided user experience is desired, such as in wizards or step-by-step processes.
To ensure a clean, efficient, and user-friendly experience, follow these best practices when designing and implementing accordion components:
- Apply accordions when you need to organize large or secondary content into collapsible sections.
- They are particularly useful for FAQs, optional content, or detailed information nested under high-level summaries.
- Collapsing content helps reduce scrolling and offers users control over what they choose to engage with.
- Use only one secondary element per side of the header (left and right) to avoid clutter.
- Choose either an icon or a badge for the left side, and a helper text, badge, or status light for the right side —never more than one per side.
- Avoid placing two elements of the same type in one header (e.g., two badges), as this reduces scannability and can confuse users.
- Always prioritize the visibility of mandatory elements like the title over optional elements.
- If both a badge and a status light are present, avoid applying semantic colors (e.g., red, green) to the badge to prevent visual conflict with the status indicator.
- Maintain consistency in layout and alignment to support content scanning, especially when multiple accordion sections are used together.
- Use single-open behavior when content is interdependent, linear, or when space is limited.
- Use multi-open behavior when content is independent or when users may need to view multiple sections at once.
- Consider the context of use and user goals when deciding which interaction pattern is most appropriate.