Accordion
A stack of expandable sections, wrapping the Base UI Accordion. Triggers live in real heading elements, height animates from a measured variable, and one section is open at a time unless you say otherwise. For a single section, use the Collapsible.
Playground
Open one question, then another: with Multiple off the first one closes on its own, with it on they stack. The Code tab shows the markup for exactly what you've configured.
States
A section is open or closed, and any item can be disabled on its own. Hover and keyboard focus (a ring around the trigger) sit on top of whichever state the section is in.
Styling states
Triggers carry data-panel-open while their section is expanded (the built-in chevron rotates on it), items carry data-open, and panels expose their measured height as --accordion-panel-height during the transition:
.ub-accordion-item[data-open] {
background: var(--ub-bg-subtle);
}Props
The open sections live on the root as an array of item values. The essentials:
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string[] | – | Sections open on first render, when uncontrolled. |
value | string[] | – | Controlled open sections. Pair with onValueChange. |
onValueChange | (value) => void | – | Fires with the new set of open values. |
multiple | boolean | false | Allow several sections open at once. |
disabled | boolean | false | Blocks toggling on every section; also available per AccordionItem. |
AccordionItem.value | string | – | Identifies the section in the root's value array. |
hiddenUntilFound | boolean | false | Keeps closed content findable with the browser's in-page search. |
keepMounted | boolean | false | Keeps a closed panel in the DOM, for content that must stay mounted. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
AccordionRoot, AccordionItem, AccordionTrigger, AccordionPanel, from @usebones/react.
- Structure: AccordionRoot wraps AccordionItems; each item holds an AccordionTrigger (children become the label; heading element and chevron are automatic) + AccordionPanel.
- Identify items with value; the root's value/defaultValue is a string array. One open at a time by default; multiple lets several stay open.
- disabled on the root or an item blocks toggling; hiddenUntilFound keeps closed content searchable.
- Restyle in CSS via .ub-accordion-item, .ub-accordion-trigger, .ub-accordion-panel, [data-panel-open] on triggers, [data-open] on items. Height animates via --accordion-panel-height; keep the transition on height. Tokens only.