Accordion
Stacked disclosure headings with single or multiple expanded panels.
Interactive preview
Installation
Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.
npx antiflex-ui@0.1.0-alpha.2 add accordionThis site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.
Usage
<Accordion type="single" defaultValue={["source"]} headingLevel={3}>
<AccordionItem value="source">
<AccordionTrigger>Can I edit the source?</AccordionTrigger>
<AccordionContent>Yes. Keep the source in your application.</AccordionContent>
</AccordionItem>
</Accordion>API reference
All components forward native attributes, className, and refs to their underlying elements.
| Prop | Type | Default |
|---|---|---|
type | single | multiple | single |
value / defaultValue | string[] | [] |
onValueChange | (value: string[]) => void | — |
collapsible / disabled | boolean | true / false |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 |
AccordionItem.value / disabled | string / boolean | required / false |
Accessibility
Each native trigger is the only child of its heading and controls a stable panel ID. Choose a heading level appropriate to your document; do not put nested controls in trigger content. Enter/Space toggles, Tab visits all controls, and optional Up/Down/Home/End moves between enabled headings without including nested accordions. Single mode uses at most the first value. With collapsible=false the final open panel cannot close; initialize at least one enabled value. Panels remain mounted and hidden when closed; default content does not create excessive region landmarks. Native refs/attributes are forwarded. Trigger/content IDs are internally owned.