Accordion
Component to show and hide related content from the main page.
An <Accordion> is a component that allows you to organizing content into collapsible sections. Accordions are commonly used in website and application designs to present information in a compact and organized way, allowing users to focus on the specific information they are interested in without being overwhelmed by excessive content.
Anatomy
- Header: The pressable row that expands or collapses the item.
- Content: The area that is revealed when the item is expanded.
- Item: A single collapsible section of the accordion.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | default | card | The available variants of this component. |
size | - | The available sizes of this component. |
The Accordion component offers different visual styles to match how content sections relate to the surrounding layout.
| Variant | Description | When to use |
|---|---|---|
default | Flat layout with bottom borders separating items. This is the default variant. | Inline content sections on a page, like FAQ lists or settings panels. |
card | Each item appears as a raised, separated card with spacing between items. | When accordion items need visual distinction from the page background, or when sections represent independent content blocks. |
Usage
An <Accordion> is a UI component that allows users to expand and collapse sections of content. It helps in organizing information efficiently, improving navigation, and reducing visual clutter. Common use cases include FAQs, structured data presentation, and collapsible navigation menus.
While accordions are a great tool for managing content, they are not always the best solution. In cases where users need frequent access to key information, hiding it behind an interaction can create unnecessary friction. Similarly, for long or complex content, expanding a section may lead to overwhelming amounts of text rather than improving readability. Navigation menus with only a few items may not benefit from collapsible sections, as this adds clicks rather than streamlining access. Finally, for processes requiring users to follow a specific sequence, a step-by-step layout is often more effective than collapsible sections.
Content Organization
Accordions help structure content by breaking it into collapsible sections, making navigation easier while preventing cognitive overload. They are particularly useful when dealing with large amounts of information that do not need to be viewed all at once.
Using Forms
For complex forms, accordions can group related fields into sections, reducing visual clutter and making the completion process more intuitive. This is particularly beneficial for multi-step or conditional forms where not all fields need to be shown at once.
Multiple expanded
With the multiple expanded mode, you can collapse and hide items as needed while keeping several sections open at the same time. You can also set one or more defaultExpandedKeys. Use a multiple expanded accordion when users need to view several sections simultaneously, such as comparing information or accessing related FAQs. It works best when the content is concise and users benefit from having multiple sections open at once without losing context.
Controlled Accordion
A controlled Accordion can be expanded and collapsed using expandedKeys and onExpandedChange. The expandedKeys must match the id on the Accordion.Item component(s) that you wish to expand.
Long-form content
For Accordions with a lot of content, enable stickyHeader so the header keeps giving context while you scroll. The header stays pinned to the top of the nearest scroll container (the page or a scrollable ancestor) while the item content scrolls underneath it.
The stickyHeader applies to the entire Accordion: <Accordion stickyHeader>...</Accordion>.
When a header needs actions such as buttons, pass them to the actions prop of Accordion.Header rather than wrapping the header in a layout component. That keeps the actions inside the sticky header so they stay pinned together with the title.
Icon position
The icon or chevron in the Header of the Accordion can be positioned right and left. Especially when you use action in the header the position should be on the left side.
The icon position also applied to the whole Accordion: <Accordion iconPosition={'left'}>...</Accordion>.
Props
Accordion
Prop
Type
DOM event handlers (64)
Prop
Type
Accordion.Item
Prop
Type
DOM event handlers (64)
Prop
Type
Accordion.Header
Prop
Type