Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Installation
$ npx shadcn@latest add "/r/accordion.json"
Usage
Multiple Items Open
Use type="multiple" to allow multiple items to be open at once.
Content for the first section.
Content for the second section.
Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Whether one or multiple items can be open at once. |
| defaultValue | string | string[] | - | The value of the item(s) to open by default. |
| value | string | string[] | - | The controlled value of the open item(s). |
| onValueChange | (value: string | string[]) => void | - | Callback when the open item(s) change. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Required | A unique value for the item. |
| disabled | boolean | false | Whether the item is disabled. |
AccordionTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes. |
AccordionPanel
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes. |