Accordion
Collapsible content sections. Single or multiple mode. Compound component with Item, Trigger, and Panel.
Example
Token-driven design system with accessible primitives, compound components, and theme support.
Install with pnpm: pnpm add @toucan-ui/core @toucan-ui/tokens
Import components from @toucan-ui/core and tokens CSS from @toucan-ui/tokens/css.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
type | 'single' | 'multiple' | 'single' | No | Allow one or many items open at once |
value | string | string[] | — | No | Controlled expanded value(s) |
defaultValue | string | string[] | — | No | Initial expanded value(s) (uncontrolled) |
onChange | (value: string | string[]) => void | — | No | Called when expansion changes |
collapsible | boolean | true | No | Allow collapsing the last open item in single mode |
Accessibility
- Trigger: <button> with aria-expanded and aria-controls
- Panel: role="region" with aria-labelledby
- Enter/Space toggle (native button behavior)
- data-state="open"|"closed" on items
Related Tokens
--accordion-border-color--accordion-trigger--accordion-panel--accordion-indicator