Accordion
Accordion
A Radix Accordion — expandable/collapsible sections, one open at a time (type="single") or several (type="multiple").
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@pompeitech/vesuvius-ui";Default
Multiple open at once
type="multiple" drops the single-open constraint — any number of items can be expanded together, and there's no collapsible prop to set (it only applies to type="single"):
API
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | Required. "single" allows at most one open item; "multiple" allows any number. | |
collapsible | boolean | false | type="single" only — whether the open item can be closed by clicking it again, leaving none open. |
value / defaultValue | string (single) or string[] (multiple) | Controlled/uncontrolled open item(s) — the type must match type. | |
onValueChange | (value: string | string[]) => void | ||
disabled | boolean | false | Disables every item in the accordion. |
AccordionItem
| Prop | Type | Description |
|---|---|---|
value | string | Required — unique identifier used by value/onValueChange above. |
disabled | boolean | Disables just this one item. |
AccordionTrigger — every native <button> prop; no custom props. Renders the chevron indicator automatically as part of its own markup.
AccordionContent — every native <div> prop; no custom props. Animates open/closed height via CSS custom properties Radix sets (--radix-accordion-content-height), not JavaScript.
Accessibility
Each trigger is a real <button> with aria-expanded; content is role="region" linked via aria-labelledby. Tab moves between triggers, Space/Enter toggles the focused one — no custom keyboard handling needed.