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 all triggers in the accordion. | boolean | false |
loop Keyboard focus loops from last trigger back to first. | boolean | true |
class Extra classes merged onto the root. | string | — |
children Compose Accordion.Item blocks inside. | Snippet | — |