14Shipped
Accordion
Expand/collapse sections for dense settings and FAQ patterns.
Import
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@charply/design"Variants
Settings sections
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | Radix accordion mode | |
| collapsible | boolean | Allow closing all items (single mode) | |
| defaultValue | string | string[] | Initially open item(s) |
Guidelines
docs/design/components/accordion.mdDo
- ✓Use for optional detail in agent settings and training dashboards
- ✓Keep trigger labels short and scannable
- ✓Use `type="single"` when only one section should be expanded at a time
Don't
- ✗Hide critical required settings inside collapsed items without a visible summary
- ✗Nest accordions more than one level deep
- ✗Use for primary navigation — use `Tabs` instead
- ✗---
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.