Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Accordion
Installation
pnpm dlx stera-ui@latest add accordion
Composition
Use the following composition to build an Accordion:
Accordion
├── AccordionItem
│ ├── AccordionTrigger
│ └── AccordionContent
└── AccordionItem
├── AccordionTrigger
└── AccordionContentExamples
Multiple Open
Pass multiple to allow more than one item to be expanded at a time.
Multiple Open
Default Open
Use defaultValue with an array of item values to pre-expand items on first render.
This item is open by default on first render.
Default Open
Icons
Icons
Borders
Borders
API Reference
Built on Base UI's Accordion primitive — see the full API reference there.
Accordion
| Prop | Type | Default |
|---|---|---|
multiple | boolean | false |
defaultValue | string[] | [] |
value | string[] | — |
onValueChange | (value: string[]) => void | — |
AccordionItem
| Prop | Type | Default |
|---|---|---|
value | string | — |
disabled | boolean | false |