Accordion
Compound disclosure group supporting single or multiple open panels.
Add it to your project
Eject the complete accordion group, then import from its generated local barrel. The copied source and CSS belong to your application.
pnpm exec toucan eject accordionnpx toucan eject accordionimport { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from '@/components/toucan/accordion';Use when
Several related content sections benefit from progressive disclosure.
Avoid when
All content is short enough to scan at once or must be compared side by side.
Example
Token-driven design system with accessible primitives, compound components, and theme support.
Install once with: pnpm add -D @toucan-ui/cli
Build local CSS, eject accordion, then import the local source.
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Accordion
Props type: AccordionProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
collapsible | boolean | true | No | Allow the final open item to close in a single-value accordion. |
defaultValue | string | string[] | undefined | No | Initial value when the component is uncontrolled. |
onChange | (value: string | string[]) => void | undefined | No | Called when the value changes. |
type | "single" | "multiple" | 'single' | No | Behavior or visual type for the component. |
value | string | string[] | undefined | No | Controlled value. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
AccordionItem
Props type: AccordionItemProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
disabled | boolean | false | No | Prevents interaction when true. |
value | string | — | Required | Controlled value. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
AccordionPanel
Props type: AccordionPanelProps
No Toucan-specific props.
Also accepts the native div attributes that are not replaced by a Toucan prop.
AccordionTrigger
Props type: AccordionTriggerProps
No Toucan-specific props.
Also accepts the native button attributes that are not replaced by a Toucan prop.
Type exports
AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps
Accessibility
- Triggers are buttons with expanded state and panel relationships.
- Disabled items remain non-interactive.
Token families
accordion