Disclosure

Accordion / Collapse

The chevron rotates off the machine's own `data-state` — nothing in JavaScript toggles a class.

data-scope="accordion"

What you get for free

Arrow-key navigation, Home and End
Correct aria-expanded and region wiring

Usage

ReactVueSvelteAngular

<Collapse
  defaultActiveKey={["a"]}
  items={[{ key: "a", label: "Shipping", children: <p>…</p> }]}
/>

<Accordion :items="items" allow-multiple>
  <template #a>…</template>
</Accordion>

<Accordion {items} allowMultiple>
  {#snippet a()}…{/snippet}
</Accordion>

<ck-accordion [items]="items" allowMultiple>
  <ng-template ckPanel="a">…</ng-template>
</ck-accordion>

Props

Prop	Type	Default	Notes
`activeKey, defaultActiveKey`	string \| string[]	—	React firstOpen panel keys. A bare string is accepted for the single-panel case.
`onChange`	(key: string[]) => void	—	React firstAlways the full open set, even in `accordion` mode where it holds one.
`accordion`	boolean	`false`	React firstOne panel at a time. The inverse of v1's `allowMultiple`: several open is now the default, and this opts out.
`items`	AccordionItem[] \| CollapseItem[]	—	The panels. v1 items are `{ id, title, content }`; React's v2 items are `{ key, label, children }`.
`value`	string[]	—	Not in ReactOpen item ids.
`defaultValue`	string[]	—	Not in ReactInitially open ids.
`allowMultiple`	boolean	`false`	Not in ReactSeveral open at once. v0 called this `multiple`.
`collapsible`	boolean	`true`	Not in ReactAllow closing the last open item.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop. The marked rows are the exception, and a temporary one, in both directions: React first exists in React while the other three adapters catch up, and Not in React is the prop it replaced, still live everywhere else.

Migrating from react-ui-toolkit

v0	v1	Notes
`multiple`	`allowMultiple`