Accordion
A vertically stacked set of interactive headings that reveal content panels.
Quick Preview
Verified buyers with completed affordability checks can apply.
Composition
Use this public composition when building Accordion:
Accordion
├── AccordionItem
│ ├── AccordionTrigger
│ └── AccordionContent
└── AccordionItemUsage
<Accordion defaultValue={["eligibility"]}>
<AccordionItem value="eligibility">
<AccordionTrigger>Who can apply?</AccordionTrigger>
<AccordionContent>Verified buyers can apply.</AccordionContent>
</AccordionItem>
</Accordion>Examples
Variants
Use variant to switch between surfaced item chrome and a quieter ghost treatment.
Use surface when the accordion needs visible item chrome.
Use ghost for lower-emphasis settings or FAQ lists.
Multiple Open Items
Set multiple when users need to compare content across panels.
Applicants need verified income.
Review usually takes three business days.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
variant | `"surface" | "ghost"` | "surface" |
multiple | boolean | false | Allows more than one item to stay open. |
value / defaultValue | string[] | - | Controlled or uncontrolled open item values. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Accordion composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.