Display
Accordion
Stacked questions that open to their answers. One open at a time unless multiple is set.
packages/design-system/components/ui/accordion.tsx
Examples
Two weeks from kickoff to handover, with a check-in every few days.
Two weeks from kickoff to handover, with a check-in every few days.
Anatomy
- 01Accordion, bordered and rounded
- 02Items, open ones tinted
- 03Trigger with chevrons
- 04Panel
Usage
import {
Accordion, AccordionContent, AccordionItem, AccordionTrigger,
} from "@repo/design-system/components/ui/accordion";
<Accordion defaultValue={["time"]}>
<AccordionItem value="time">
<AccordionTrigger>How long does a sprint take?</AccordionTrigger>
<AccordionContent>Two weeks.</AccordionContent>
</AccordionItem>
</Accordion>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | any[] | none | The open items' values. Always an array. |
| multiple | boolean | false | Let more than one item be open. |
| onValueChange | (value, details) => void | none | Called with the open values. |
| AccordionItem value | any | none | Identifies the item. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Write triggers as the question people would ask.
Don't
- Hide something everyone needs inside it.