💠 Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Usage

The accordion component efficiently presents extensive content within a confined space by revealing information progressively. The header title provides users with a summarized view of the content, empowering them to choose which sections to explore further.

Accordions enhance information processing and discovery, optimizing effectiveness. However, it's essential to consider that accordions conceal content, and there's a possibility that users may not notice or read all the included information. If users are likely to read all content, it's recommended to avoid using an accordion, as it introduces the additional step of clicking. Instead, opt for a full-scrolling page with regular headers.

When to use

• Organizing Related Information: Use accordions to structure and present related pieces of information together.
• Reducing Scrolling on Non-Crucial Content: Implement accordions to condense pages and minimize scrolling when it's not essential for users to read the entire content.
• Limited Space Scenarios: Deploy accordions in situations where space is limited, and displaying lengthy content all at once is impractical, such as on mobile interfaces or within side panels.

Examples

Single item open at the same time

Set the type property to single to enable only one item to open at a time.

Multiple items open at the same time

Set the type prop to multiple to enable opening multiple items at once.

Allow collapsing all items

Use the collapsible prop to allow all items to close.

Default value

Use the defaultValue prop to define the open item by default.

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Accordion WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions