◇

Accordion

5 parts

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  AccordionRoot,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionContent,
} from '@robonen/primitives/disclosure/accordion';

<AccordionRoot>
  <AccordionItem />
  <AccordionHeader />
  <AccordionTrigger />
  <AccordionContent />
</AccordionRoot>

API Reference

AccordionRoot

Root

Prop	Type	Default	Description
`modelValue`?	`string \| string[]`	—	Controlled open value(s). Bind with `v-model`.
`defaultValue`?	`string \| string[]`	—	Initial value(s) for uncontrolled mode.
`type`?	`AccordionType`	`'single'`	'single' allows one panel; 'multiple' allows many. When omitted, the mode is inferred from the shape of `modelValue`/`defaultValue` (array → 'multiple', otherwise 'single').
`collapsible`?	`boolean`	`false`	Allow closing all panels in single mode.
`disabled`?	`boolean`	—	Disable all items.
`orientation`?	`'horizontal' \| 'vertical'`	`'vertical'`	Orientation of the accordion.
`dir`?	`RovingDirection`	`'ltr'`	Writing direction.
`loop`?	`boolean`	`true`	Wrap keyboard navigation.
`unmountOnHide`?	`boolean`	`true`	Unmount closed content from the DOM instead of keeping it mounted. When `false`, closed panels stay in the DOM rendered with `hidden="until-found"` so the browser's find-in-page can locate and reveal them. Individual items may override this via `AccordionItem`'s own `unmountOnHide`.

Emits

Event	Payload
`update:modelValue`	`[value: string \| string[] \| undefined]`

AccordionItem

Item

A single collapsible section of the accordion, grouping one trigger with its content. Identified by a unique `value` that the root uses to track open state; provides item-level context (open, disabled, ids) to its `AccordionTrigger` and `AccordionContent`.

Prop	Type	Default	Description
`value`	`string`	—	Unique value for this item.
`disabled`?	`boolean`	—	Disable this item.
`unmountOnHide`?	`boolean`	—	Override the root's `unmountOnHide` for this item only. When omitted the root value is inherited. Set `false` to keep this item's closed content mounted (find-in-page discoverable) regardless of the root setting.

AccordionHeader

Header

The heading element that wraps an `AccordionTrigger`. The WAI-ARIA accordion pattern requires each trigger to live inside a heading (`h1`–`h6`) so screen readers can navigate sections by heading level. Renders as `<h3>` by default and forwards `data-state` / `data-disabled` / `data-orientation` for styling.

No props or events — renders its element and forwards attributes.

AccordionTrigger

Trigger

The interactive header button that toggles its item's content open and closed. Renders as a `<button>` by default, wires up the correct ARIA (`aria-expanded`/`aria-controls`) and participates in arrow-key roving focus across all triggers.

No props or events — renders its element and forwards attributes.

AccordionContent

Content

The collapsible panel revealed when its item is open. Rendered as an ARIA `region` labelled by its trigger and mounted/unmounted via `Presence` so enter/leave transitions can run (use `forceMount` to keep it mounted for custom animation). While transitioning it measures its natural size and exposes `--accordion-content-height` / `--accordion-content-width` CSS variables so consumers can drive height/width transitions purely from CSS. When the item (or root) sets `unmountOnHide: false`, closed content stays in the DOM with `hidden="until-found"` so the browser's find-in-page can reveal it.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Keep content mounted even when closed.