Collapsible
An interactive component that expands and collapses a section of content.
Installation
$ npx shadcn@latest add "/r/collapsible.json"
Usage
Uncontrolled
Use defaultOpen for an uncontrolled collapsible.
This is expanded by default.
Props
Collapsible
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | The controlled open state. |
| defaultOpen | boolean | false | The initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Callback when the open state changes. |
| disabled | boolean | false | Whether the collapsible is disabled. |
CollapsibleTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge props onto the child element. |
| className | string | - | Additional CSS classes. |
CollapsibleContent
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes. |