Accordion
How to build an accordion using React. For code usage with other frameworks, please follow the links in the (live demo)[/components/accordion/usage#live-demo].
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
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| align | 'start' | 'end' | – | – | Specify the alignment of the accordion heading title and chevron |
| children | node | true | – | – |
| className | string | – | – | Specify 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
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | true | – | – |
| className | string | – | – | Provide an optional className to be applied to the container node |
| open | boolean | – | – | Specify whether the AccordionItem should be open |
| title | node | – | – | Provide 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
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| align | 'start' | 'end' | – | 'end' | Specify the alignment of the accordion heading title and chevron |
| className | string | – | – | Provide an optional className to be applied to the container node |
| count | boolean | – | 4 | Specify the number of items to render |
| open | boolean | – | true | Specify 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.