Accordion
Vertically stacked panels that expand to reveal their content. Built on reka-ui. Single-open by default; switch type to multiple to allow several at once.
Default
Single panel open at a time.
Multiple
Allow several panels open at once with type="multiple".
Controlled
Drive the open panel from outside via v-model.
Controlled from the buttons above.
API Reference
Props, events, and slots for each sub-component.
Accordion
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Open one panel at a time, or many. |
| modelValue | string | string[] | — | Open value(s). Supports v-model. String for single, array for multiple. |
| defaultValue | string | string[] | — | Initial open value when v-model is not used. |
| collapsible | boolean | false | Allow closing the only open panel (single mode). |
| disabled | boolean | false | Disable every item at once. Forwards to reka-ui AccordionRoot. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires when the open panel(s) change. Enables v-model. |
Slots
| Slot | Description |
|---|---|
| default | AccordionItem children. |
AccordionItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Unique value to track open state. |
| disabled | boolean | false | Disable this item. |
Slots
| Slot | Description |
|---|---|
| default | AccordionTrigger and AccordionContent. |
AccordionTrigger
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Extra classes, merged with cn(). Forwards remaining props to reka-ui AccordionTrigger. |
Slots
| Slot | Description |
|---|---|
| default | Trigger label content. |
| icon | Override the trailing chevron. Defaults to a rotating ChevronDown. |
AccordionContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| forceMount | boolean | false | Keep content mounted while collapsed. Forwards to reka-ui AccordionContent. |
Slots
| Slot | Description |
|---|---|
| default | Panel body revealed when open. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Tab | Moves focus to the next trigger. |
| Enter | Toggles the focused panel. |
| Space | Toggles the focused panel. |
| ↑ | Moves focus to the previous trigger. |
| ↓ | Moves focus to the next trigger. |
| Home | Moves focus to the first trigger. |
| End | Moves focus to the last trigger. |
- Built on reka-ui; each trigger controls its region via aria-controls and aria-expanded.
- Collapsed regions are hidden from assistive technology until expanded.