Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Features

  • Full keyboard navigation.
  • Expands one panel at a time.
  • Can be controlled or uncontrolled.

Install the component from your command line.

Import the components and piece the parts together.

Create your styled accordion component from the primitive parts.

Contains all the parts of an accordion.

PropTypeDefaultRequired
asenumdivNot required
valuestringNo default valueNot required
defaultValuestringNo default valueNot required
disabledbooleanfalseNot required
onValueChangefunctionNo default valueNot required

Contains all the parts of a collapsible section.

PropTypeDefaultRequired
asenumdivNot required
disabledbooleanfalseNot required
valuestringNo default valueRequired

Wraps an Accordion.Button. Use the as prop to update it to the appropriate heading level for your page.

PropTypeDefaultRequired
asenumh3Not required

Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.Header.

PropTypeDefaultRequired
asenumbuttonNot required

Contains the collapsible content for an item.

PropTypeDefaultRequired
asenumdivNot required

Here goes the content for the accordion item 2.

Adheres to the Accordion WAI-ARIA design pattern.

KeyDescription
SpaceWhen focus is on an Accordion.Button of a collapsed section, expands the section.
EnterWhen focus is on an Accordion.Button of a collapsed section, expands the section.
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
ArrowDownMoves focus to the next Accordion.Button.
ArrowUpMoves focus to the previous Accordion.Button.
HomeWhen focus is on an Accordion.Button, moves focus to the first Accordion.Button.
EndWhen focus is on an Accordion.Button, moves focus to the last Accordion.Button.