Accordion

Collapsible sections. Supports single (one item open at a time) and multiple (many open at once). Controlled and uncontrolled.

Preview

Open Sandbox

Anatomy


import { Accordion } from '@wire-ui/react'
 
// Single — only one item open at a time
<Accordion.Root type="single" collapsible defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Section 1</Accordion.Trigger>
    <Accordion.Content>Content for section 1</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>
 
// Multiple — many items can be open simultaneously
<Accordion.Root type="multiple" defaultValue={['item-1']}>
  ...
</Accordion.Root>

Root props (single)

Prop	Type	Default	Description
`type`	`'single'`	required	Single selection mode
`value`	`string`	—	Controlled open item
`defaultValue`	`string`	—	Initial open item
`onChange`	`(value: string) => void`	—	Called when selection changes
`collapsible`	`boolean`	`false`	Allow closing the open item by clicking it again
`disabled`	`boolean`	`false`	Disables all items

Root props (multiple)

Prop	Type	Default	Description
`type`	`'multiple'`	required	Multiple selection mode
`value`	`string[]`	—	Controlled open items
`defaultValue`	`string[]`	`[]`	Initial open items
`onChange`	`(value: string[]) => void`	—	Called when selection changes
`disabled`	`boolean`	`false`	Disables all items

Item props

Prop	Type	Description
`value`	`string`	Unique identifier for this item
`disabled`	`boolean`	Disables this specific item

Data attributes

Attribute	Element	Values
`data-state`	Item, Trigger, Content	`"open"` / `"closed"`
`data-disabled`	Item, Trigger	Present when disabled

Trigger also sets aria-expanded.