Skip to content

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.

Good question. As you might have guessed from the examples above, your carbon footprint comes from many areas. Like driving your car. How you power your home. Which foods you decide to eat.

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

NameValuesDefault

inline

Boolean

...

JSX.IntrinsicElements["div"]

Accordion

NameValuesDefault

title (required)

ReactNode

expanded

Boolean

false

onToggle(expanded) => null

Function

headingComponent

ComponentTypeString

Heading3

...

JSX.IntrinsicElements["div"]

Tokens