◇

Accordion

4 parts

Anatomy

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

vue

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

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

API Reference

AccordionRoot

Root

Prop	Type	Default	Description
`modelValue`?	`string \| string[]`	—	Current open value(s) for controlled mode.
`defaultValue`?	`string \| string[]`	—	Initial value(s) for uncontrolled mode.
`type`?	`'single' \| 'multiple'`	`'single'`	'single' allows one panel; 'multiple' allows many.
`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.

Emits

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

AccordionItem

Item

Prop	Type	Default	Description
`value`	`string`	—	Unique value for this item.
`disabled`?	`boolean`	—	Disable this item.

AccordionTrigger

Trigger

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

AccordionContent

Content

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