Accordion
Collapsible disclosure sections.
Usage
Import the namespace and compose Accordion.Root, Accordion.Item, Accordion.Header, Accordion.Trigger, and Accordion.Content. The type prop controls whether one or many items can be open at once.
Yes — built on Bits UI with full WAI-ARIA support and keyboard navigation.
No. Styles ship with the package; theme everything via CSS variables.
Yes. Target the
data-state attribute on Content for CSS transitions.Multiple
Set type="multiple" to allow several items to stay open simultaneously.
Each item's open state is independent.
Both panels can be open at the same time.
Opening one does not close the other.
Props
Props for Accordion.Root. Each Accordion.Item requires a unique value string
that pairs its Trigger with its Content. All
parts accept class for custom overrides.
| Prop | Type | Default |
|---|---|---|
type `single` allows one open item at a time; `multiple` allows many. | 'single' | 'multiple' | 'single' |
value Controlled open item(s). Use `bind:value` for two-way binding. | string | string[] | — |
onValueChange Called when the open item(s) change. | (value: string & string[]) => void | — |
disabled Disables every trigger in the accordion. | boolean | — |
loop Keyboard focus loops from the last trigger back to the first. | boolean | — |
class Extra classes merged onto the root. | string | — |
children Compose `Accordion.Item` blocks inside. | Snippet | — |