Accordion

A stack of collapsible sections. By default opening one closes the others.

Usage

Import the component and render it.

import { Accordion } from 'src/components/Accordion/Accordion';

<Accordion items={[{"value":"one","title":"Accordion item","content":"Accordion content goes here. This area can contain any text or information that is revealed when the item is expanded."},{"value":"two","title":"Accordion item","content":"Accordion content goes here. This area can contain any text or information that is revealed when the item is expanded."},{"value":"three","title":"Accordion item","content":"Accordion content goes here. This area can contain any text or information that is revealed when the item is expanded."}]} />

Accessibility

Role: group of Accordion Items (each a heading + button + region).

Key	Action
`Tab`	Moves between the headers
`↓ / ↑`	Moves focus to the next / previous header (wraps)
`Home / End`	Moves focus to the first / last header
`Enter / Space`	Expands or collapses the focused item

Arrow keys only move focus; they never expand an item.

Composition

Use the following composition to build an Accordion:

Accordion
├── AccordionItem
└── Separator

AccordionItem

One collapsible section: a header button with a title, and content shown when expanded. Only used inside Accordion.

AccordionItem

<AccordionItem
  title="Accordion item"
  content="Accordion content goes here. This area can contain any text or information that is revealed when the item is expanded."
/>

Actions

Pass callbacks to respond to the component.

import { Accordion } from 'src/components/Accordion/Accordion';

<Accordion
  items={[{"value":"one","title":"Accordion item","content":"Accordion content goes here. This area can contain any text or information that is revealed when the item is expanded."},{"value":"two","title":"Accordion item","content":"Accordion content goes here. This area can contain any text or information that is revealed when the item is expanded."},{"value":"three","title":"Accordion item","content":"Accordion content goes here. This area can contain any text or information that is revealed when the item is expanded."}]}
  onValueChange={(value) => console.log(value)}
/>

Callback	When
`onValueChange`	Called with the expanded items.