Accordion
Stacked sections that expand in place, with subtle dividers and consistent keyboard navigation.
Base UI reference ↗Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add accordionDependencies
What add accordion installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
npm
@base-ui/[email protected]
Examples
3 examples · 1 componentFAQ
One item open at a time; the first starts open.
Several open
multiple keeps each section independent.
Heading level and disabled
headingLevel={2} for a top-level section; a disabled item is skipped.
API reference
Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.
| Prop | Type | Default |
|---|---|---|
value / defaultValueOpen items (by their value). | string[] | — |
onValueChangeCalled with the open items. | (value: string[]) => void | — |
multipleLets several items stay open at once. | boolean | false |
hiddenUntilFoundClosed panels stay searchable: find-in-page opens the matching item. | boolean | true |
AccordionItemvalue identifies it; disabled blocks it. | div | — |
AccordionTriggerheadingLevel (2–6) sets the wrapping heading to fit the page outline. | h3 > button | — |
AccordionContentPanel with a height animation; className goes to the padded inner box. | div | — |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Closed | Only the trigger row with a divider. |
| Open | Panel expanded; the chevron turns 180°. |
| Multiple | Several items open at once with multiple. |
| Focus | Offset outline on the trigger. |
| Disabled | Dimmed and skipped by the arrow keys. |
Accessibility
Each trigger is a button inside a heading, with aria-expanded and aria-controls; Enter and Space toggle it.
Arrow keys move between triggers, Home and End jump to the first and last; disabled items are skipped.
Pick headingLevel so the triggers continue the page's heading outline instead of breaking it.
Closed panels use hidden="until-found", so browser search still finds their text; the height animation stops with reduced motion.