Accordion

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

Features

Can expand one or multiple items.

Full keyboard navigation.

Can be controlled or uncontrolled.

Supports animation with forceMount and CSS transitions.

Supports disabled state per item or globally.

Example

A headless component library. Zero styles shipped — you bring your own via className and data-attribute selectors.

Anatomy


import { Accordion } from '@wire-ui/react'
 
<Accordion.Root type="single" collapsible defaultValue="item-1">
<Accordion.Item value="item-1">
<Accordion.Trigger>What is wire-ui?</Accordion.Trigger>
<Accordion.Content>
  A headless component library. Zero styles shipped — you bring your own via className and data-attribute selectors.
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>

Styling

Accordion uses data-state on Item, Trigger, and Content to indicate open/closed state. Use this to style the active section, rotate chevron icons, or animate content height.


<Accordion.Trigger className="
  text-black
  data-[state=open]:font-bold
  data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
">
  Section title
</Accordion.Trigger>
 
<Accordion.Content className="
  data-[state=closed]:hidden
">
  Content here
</Accordion.Content>

Using data attributes

Accordion sets data-state on Item, Trigger, and Content elements. The value is "open" or "closed".


/* Rotate chevron when open */
[data-state="open"] svg { transform: rotate(180deg); }
 
/* Animate content */
[data-state="closed"] .content { display: none; }
[data-state="open"] .content   { display: block; }
 
/* Disabled trigger */
[data-disabled] { opacity: 0.5; cursor: not-allowed; }

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.

Keyboard Interactions

Key	Description
`Space`	Opens/closes the focused collapsible.
`Enter`	Opens/closes the focused collapsible.
`Tab`	Moves focus to the next trigger.
`Shift+Tab`	Moves focus to the previous trigger.