Skip to content
Telescope

AccordionNew

A stacked set of interactive items that you can click to show more information. Each item can be either collapsed or expanded to reveal the complete content.

We'll send all admins an email when your wallet balance reaches
14,000.00 GBP

Features

  • Supports items with optional design elements (e.g. Icon, Description, Badge, Counter)
  • Supports default opened item
  • Supports controlled state

When to use

Accordions reveal content progressively, allowing users to access relevant information as needed. This makes it easier to understand complex information and reduces cognitive load. They also shorten pages by organising related information together, reducing vertical scrolling for non-crucial content especially on smaller screens.

Accordions conceal information, so avoid using them for important details.

For optimal user experience, we recommend maintaining the expanded state of items until the user chooses to collapse them. This enables users to conveniently review content across multiple items simultaneously.

Examples

With icon

Icons make it easier to quickly scan and recognise items in an accordion. We suggest using icons to maximise the visual distinction between items in accordions with multiple different entries, for example when there are 4 or more items.

With badge

Use badges to show the status of an item.

With description

Descriptions provide additional information useful to the user, for example timestamps. These should only be added if actually necessary, and should be as short as possible.

With counter

Counters quickly convey the number of items within an accordion.

With footer

Provides an additional section for content and actions, remaining visible even when the accordion is closed.

invoices@pleo.io
Copy to clipboard

Best practices

Do
Use accordions to progressively reveal content and reduce cognitive load.
Don't
Avoid using accordions for critical or essential information that should always be visible.
Do
Use accordions to organize and group related content logically.
Don't
Avoid combining unrelated content within the same accordion, making it challenging for users to find information..
Do
Provide clear and concise section titles, and short descriptions only if necessary.
Don't
Avoid combining too many header components such as a counter and a badge.
Do
Include relevant, helpful, brief and easy to understand content within each accordion section.
Don't
Avoid using accordions as a hiding place for irrelevant or unnecessary information.
Do
Allow users to keep multiple sections open simultaneously for efficient content comparison.
Don't
Avoid forcing all other sections to close when a new section is opened (unless necessary).

Accessibility

We use @radix-ui/react-accordion to make the Accordion accessibile. Adheres to the Dialog WAI-ARIA design pattern.

Related components

  • Tabs: Tabs are labeled controls that allow users to switch between multiple views within a page.