Accordion
A compound component for showing and hiding sections of content, supporting single-item and multi-item expansion modes.
Installation
npx dafink-ui add accordionDemo
A React component library you install source into, not a runtime package.
Composition
<Accordion>
</Accordion>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Whether one or many items can be open at once. |
| defaultValue | string | string[] | - | Item value(s) open on initial render. |
| collapsible | boolean | false | When type is single, whether the open item can be collapsed by clicking again. |
| className | string | "" | Additional classes on the root div. |
Accessibility
Accordion uses native tab order, not roving tabindex: every AccordionTrigger is its own native button and its own Tab stop, so Tab and Shift+Tab step through each trigger in document order and Enter/Space toggle whichever trigger is currently focused. Each trigger sets aria-expanded to reflect its own item's open state, and each AccordionContent panel carries role="region" plus aria-hidden (true when closed, false when open); panels are never unmounted and never receive the native hidden attribute, they collapse to zero height via a CSS grid-height transition instead.