THEME
MOTION
HAPTIC
SOUND
ACCORDION
Expand/collapse sections. Controlled via expandedIds + onExpandedChange; `allowMultiple={false}` for exclusive mode.
Live demo
Import
import { Accordion } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
items | Array<{id, title, content, meta?, disabled?}> | — | yes | |
expandedIds | string[] | — | — | Controlled. Uncontrolled fallback uses defaultExpandedIds. |
onExpandedChange | (ids: string[]) => void | — | — | |
defaultExpandedIds | string[] | [] | — | |
allowMultiple | boolean | true | — | When false, opening one item closes the others. |
Examples
basic
<Accordion items={[{id:"a",title:"DETAILS",content:<p>hello</p>}]} />exclusive
<Accordion items={items} allowMultiple={false} defaultExpandedIds={["a"]} />Accessibility
Role: group
- aria-expanded + aria-controls set automatically on each header
Feedback
| Haptic | none |
| Sound | none |
Motion states
expand · collapse · chevron-rotate