Skip to content
Data Display

Accordion

A stack of headings that each reveal a panel. One panel is open at a time unless you set multiple. Built on Base UI, so the headings are real buttons and arrow keys move between them.

Sourcesrc/components/ui/accordion.tsx

Three to five working days within the UK, and seven to ten elsewhere.

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@mikenotthepope/substrateui"

Composition

Every item needs a value— it is what appears in the accordion's open-value array, so two items sharing one string open and close together.

Accordion
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Several panels at once

multiple stops the accordion closing the previous panel. Use it where the panels are a checklist to read through rather than alternatives to choose between.

Compiles the library and the docs site.

Unit tests, then the visual regression suite.

Disabling an item

disabledon the root turns off every trigger; on an item it turns off that one. A disabled trigger keeps its place in the tab order removed rather than hidden, so the list doesn't reflow.

Accessibility

Each trigger is a real button inside a heading element, carrying aria-expanded and pointing at its panel with aria-controls. Up and Down move between triggers, Home and End jump to the first and last.

The panel animates its height, and the chevron its rotation. Both collapse under prefers-reduced-motion.

An accordion is not a substitute for headings. If the panel content is part of the document outline, put real headings inside the panels — the trigger's own heading level is set by Base UI and describes the disclosure, not the content.

API Reference

Accordion is Base UI's Accordion.Root unchanged, and AccordionTrigger and AccordionContent add styling to its Trigger and Panel. The props below are the ones you reach for; see the Base UI accordion docs for the full inherited surface.

PropTypeDefaultDescription
multiplebooleanfalseAllow more than one item to be open at once. Off, opening an item closes the last one.
valuestring[]—The controlled list of open item values — an array in both modes.
defaultValuestring[][]The items open on first render, when uncontrolled.
onValueChange(value: string[]) => void—Fired with the new list of open values.
disabledbooleanfalseDisable every trigger in the accordion.

AccordionItem

PropTypeDefaultDescription
valuestring—Identifies the item in the accordion's value array. Required.
disabledbooleanfalseDisable this item's trigger only.