Collapsible
An interactive component which expands/collapses a panel
Divergence from Blok
Composable: previous Label/Icon strings replaced by CollapsibleTrigger children. The trigger is whatever you put inside <CollapsibleTrigger> — typically a Button with an icon, or any clickable element. Add [&[data-state=open]_svg]:rotate-180 to the trigger's ClassName to rotate a chevron on open. The previous BeforeCollapsibleContent / AfterCollapsibleContent slots are no longer needed — siblings of CollapsibleTrigger/CollapsibleContent render in source order.
Examples
Default
Custom trigger (Button)
Hidden body content sits below the button when open.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Collapsible | Root container. Tracks Open state and cascades itself so CollapsibleTrigger and CollapsibleContent can react to toggles. |
| CollapsibleTrigger | The native <button> that toggles the parent Collapsible. Mirrors the parent's data-state so CSS can react (e.g. rotate a chevron when open). |
| CollapsibleContent | The revealed body. Uses a grid-template-rows 0fr→1fr transition so open/close animates smoothly without JS measurement. |
Collapsible
Root container. Tracks Open state and cascades itself so CollapsibleTrigger and CollapsibleContent can react to toggles.
| Property | Type | Required | Description |
|---|---|---|---|
| Open | bool | Whether the panel is expanded. Supports two-way binding via @bind-Open. Default: false. | |
| OpenChanged | EventCallback<bool> | Fires whenever Open toggles. Pair with Open for two-way binding. | |
| Disabled | bool | When true, CollapsibleTrigger clicks are ignored and the trigger renders disabled. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the outer container. | |
| ChildContent | RenderFragment? | Should contain one CollapsibleTrigger and one CollapsibleContent, plus any sibling markup. |
CollapsibleTrigger
The native <button> that toggles the parent Collapsible. Mirrors the parent's data-state so CSS can react (e.g. rotate a chevron when open).
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the trigger button. Defaults include text-foreground so the label is visible in dark mode. | |
| ChildContent | RenderFragment? | Trigger label and any affordance markup (icon, chevron, etc.). | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the underlying <button>. |
CollapsibleContent
The revealed body. Uses a grid-template-rows 0fr→1fr transition so open/close animates smoothly without JS measurement.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the outer grid wrapper. | |
| ChildContent | RenderFragment? | Body content revealed when Open is true. |