Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Accordion

How to build an accordion using React. For code usage with other frameworks, please follow the links in the live demo on the usage tab.

Overview

You can build an accordion using a combination of the Accordion and AccordionItem components. The Accordion components accepts a list of AccordionItem components as children and each AccordionItem is responsible for displaying the accordion’s heading and panel content.

You can configure the accordion item’s heading using the title prop. Everything you pass in as a child of AccordionItem will be rendered in the accordion’s panel.

import { Accordion, AccordionItem } from "carbon-components-react";
function MyComponent() {
return (
<Accordion>
<AccordionItem title="Panel A">Panel A</AccordionItem>
<AccordionItem title="Panel B">Panel B</AccordionItem>
<AccordionItem title="Panel C">Panel C</AccordionItem>
</Accordion>

Skeleton state

You can use the AccordionSkeleton component to render a skeleton variant of an accordion. This is useful to display while content in your accordion is being fetched from an external resource like an API.

import {
Accordion,
AccordionItem,
AccordionSkeleton,
} from "carbon-components-react";
function MyComponent({ isLoading }) {
if (isLoading) {
return <AccordionSkeleton open count={3} />;

Component API

Accordion props

PropTypeRequiredDefaultDescription
align'start' | 'end'Specify the alignment of the accordion heading title and chevron
childrennodetrue
classNamestringSpecify an optional className to be applied to the container node

Additional props passed into Accordion will be forwarded along to the underlying accordion container.

Accordion align

In rare cases, you may need to specify the alignment of the icon in the accordion. You can use the align prop to specify the side where the icon should be placed.

Note: This prop must not be used to create a tree view or set of nested accordions.

<Accordion align="start">
<AccordionItem title="Panel A">Panel A</AccordionItem>
<AccordionItem title="Panel B">Panel B</AccordionItem>
<AccordionItem title="Panel C">Panel C</AccordionItem>
</Accordion>

Accordion className

The className prop passed into Accordion will be forwarded along to the underlying accordion container. This is useful for specifying a custom class name for layout.

<Accordion className="custom-class">
<AccordionItem title="Panel A">Panel A</AccordionItem>
<AccordionItem title="Panel B">Panel B</AccordionItem>
<AccordionItem title="Panel C">Panel C</AccordionItem>
</Accordion>

AccordionItem props

PropTypeRequiredDefaultDescription
childrennodetrue
classNamestringProvide an optional className to be applied to the container node
openbooleanSpecify whether the AccordionItem should be open
titlenodeProvide the value of the accordion item heading

Additional props passed into AccordionItem, such as onClick, will be passed through to the underlying accordion header.

AccordionItem className

The className prop passed into AccordionItem will be forwarded along to the underlying accordion header. This is useful for specifying a custom class name for layout.

<Accordion>
<AccordionItem title="Panel A" className="custom-class">
Panel A
</AccordionItem>
<AccordionItem title="Panel B">Panel B</AccordionItem>
<AccordionItem title="Panel C">Panel C</AccordionItem>
</Accordion>

AccordionItem title

You can use the title prop to specify the accordion item’s heading. The default behavior is to pass in a string as the title, however you can also pass in a node.

Note: A custom title prop that renders an interactive element is considered an accessibility violation. For more information, visit our reference section below.

<Accordion align="start">
<AccordionItem title={() => <span>Panel A</span>}>Panel A</AccordionItem>
<AccordionItem title="Panel B">Panel B</AccordionItem>
<AccordionItem title="Panel C">Panel C</AccordionItem>
</Accordion>

AccordionSkeleton props

PropTypeRequiredDefaultDescription
align'start' | 'end''end'Specify the alignment of the accordion heading title and chevron
classNamestringProvide an optional className to be applied to the container node
countboolean4Specify the number of items to render
openbooleantrueSpecify whether the skeleton should display the first item as open

Additional props passed into AccordionSkeleton will be forwarded along to the underlying skeleton container.

AccordionSkeleton className

The className prop passed into AccordionSkeleton will be forwarded along to the underlying skeleton container. This is useful for specifying a custom class name for layout.

<AccordionSkeleton className="custom-class" open count={3} />

References

Why is interactive content in a heading considered an accessibility violation?

When using the title prop from Accordion, it is possible to render arbitrary markup within the accordion header. The accordion header itself is rendered as a <button> and is considered an interactive element.

If you render an interactive element inside this header, then it becomes nested inside the <button>. Common examples of this are buttons or links. Rendering interactive content inside the accordion heading is not reachable via a keyboard or screen reader.

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.