Collapsible
An interactive component which expands/collapses a panel.
Examples
Default
Preview
Default open
Preview
This content starts visible because defaultOpen is set.
With animation (accordion)
Preview
With animation (fade)
Preview
API
Collapsible
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| open | boolean | true, false | - | Controls the open state (controlled). |
| defaultOpen | boolean | true, false | false | Whether the content is open by default (uncontrolled). |
| onOpenChange | (open: boolean) => void | - | - | Called when the open state changes. |
| animation | ”accordion” | “fade” | accordion, fade | - | Type of animation to apply. When set, enables smooth expand/collapse animation. accordion animates the height (accordion-style), fade animates opacity. If not provided, no animation is applied. |
| …props | All Radix Collapsible.Root props | - | - | All native properties of the Radix UI Collapsible Root component. |
CollapsibleTrigger
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| asChild | boolean | true, false | false | When true, uses the child element as the trigger. |
| disabled | boolean | true, false | false | Disables the trigger interaction. |
| …props | All Radix Collapsible.Trigger props | - | - | All native properties of the Radix UI Collapsible Trigger component. |
CollapsibleContent
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| className | string | - | - | Additional CSS classes to apply to the content wrapper. |
| …props | All Radix Collapsible.Content props | - | - | All native properties of the Radix UI Collapsible Content component. |
Last updated on