Accordion
Stacked sections, one open at a time.
Wayfinding for the three northern depots. Delivery 21 Nov.
Brand
4 people
Permit lead time is ten working days.
In context
Ferry crew, three sessions recorded. Notes tagged and shared with Maya.
Owners and editors. Viewers can comment.
Accordion props
| Prop | Type | Required | Default |
|---|---|---|---|
type | "single" | "multiple" | Yes | — |
asChild | boolean | undefined | No | — |
AccordionItem props
| Prop | Type | Required | Default |
|---|---|---|---|
value | string | Yes | — |
id | string | undefined | No | — |
trigger | ReactNode | Yes | — |
disabled | boolean | undefined | No | — |
Accessibility
Radix accordion: each trigger is a <button> inside a heading with aria-expanded and aria-controls; each panel is a region labelled by its trigger. Arrow keys move between triggers, Home and End jump to the ends, Enter or Space toggles. A disabled item is skipped.
data-rebar-* attributes
data-rebar-component="accordion" on the root; data-rebar-part="item" | "trigger" | "content". Radix's own data-state="open"|"closed" is read directly.
Migrating to Ant Design
AntD's Collapse takes an items array rather than JSX children: a real, if mechanical, restructuring, not a straight prop rename.