Basic
Default Open
This section starts open by default.
Multiple Items
3 items
Always visible item
Sub-components
| Component | Description |
|---|---|
| Collapsible | Root provider (controls open/close state) |
| Collapsible.Trigger | Element that toggles the collapsible |
| Collapsible.Content | The content area that expands and collapses |
Root Props
| Prop | Type | Description |
|---|---|---|
| defaultOpen | boolean | Whether the collapsible is open by default |
| open | boolean | Controlled open state |
| onOpenChange | (open: boolean) => void | Callback when open state changes |
| disabled | boolean | Prevents the user from interacting with the collapsible |
| className | string | Additional classes on the root element |
Usage
<Collapsible>
<Collapsible.Trigger asChild>
<Button>Toggle</Button>
</Collapsible.Trigger>
<Collapsible.Content>
<p>Collapsible content here.</p>
</Collapsible.Content>
</Collapsible>