Accordion
Accordions control the visibility of related sections of content.
Overview
Accordions give users an overview of available content and allow them to show and hide sections as needed.
There are other components that can be used for hiding content, e.g. Disclosure and Tabs.
Usage
Content
Placing sections of content inside an accordion gives users the ability to pick and choose what is relevant to them. An example would be "Frequently asked questions" content.
Hidden content is easily missed, so essential information should not be placed inside an accordion.
Accessibility
The Accordion component will automatically link the component toggle button to the content and set the relevant aria attributes.
Variations
Default expanded
Accordion is an uncontrolled component and manages its own state - the default state can be set with the expanded prop.
Custom heading component
Accordion uses the Heading3 component by default, but this can be overridden using the headingComponent prop. Use the semantically correct heading level.
Inline
AccordionGroup is built using the Card component, and also supports the use of the inline prop for nesting.
Properties
AccordionGroup
| Name | Values | Default |
|---|---|---|
inline | Boolean | |
... | JSX.IntrinsicElements["div"] |
Accordion
| Name | Values | Default |
|---|---|---|
title (required) | ReactNode | |
expanded | Boolean | false |
onToggle(expanded) => null | Function | |
headingComponent | ComponentTypeString | Heading3 |
... | JSX.IntrinsicElements["div"] |