Single (Collapsible)
Only one item open at a time. Click the open item again to collapse it.
Multiple
Set type="multiple" to allow several items to be expanded simultaneously.
Disabled Item
Individual items can be disabled to prevent interaction.
Props
| Prop | Type | Description |
|---|---|---|
| type | "single" | "multiple" | Whether one or multiple items can be open at the same time. |
| collapsible | boolean | When type is "single", allows closing the open item by clicking its trigger again. |
| defaultValue | string | string[] | The value(s) of items open by default (uncontrolled). |
| value | string | string[] | Controlled open item value(s). |
| onValueChange | (value: string | string[]) => void | Callback when the open items change. |
| disabled | boolean | When true on an Item, prevents it from being opened. |
| className | string | Additional classes on any sub-component. |
Sub-components: Accordion.Item, Accordion.Trigger, Accordion.Content.
Usage
<Accordion type="single" collapsible>
<Accordion.Item value="item-1">
<Accordion.Trigger>Question?</Accordion.Trigger>
<Accordion.Content>Answer.</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Another question?</Accordion.Trigger>
<Accordion.Content>Another answer.</Accordion.Content>
</Accordion.Item>
</Accordion>