Collapsible Toggle-able content section with the new CollapsibleTrigger and CollapsibleContent subcomponents.
v0.3.0-alpha.2 adds CollapsibleTrigger and CollapsibleContent subcomponents for a fully compositional pattern, replacing the previous parameter-driven open state management.
v0.2.1 v0.3.0-alpha.2 External IsOpen + IsOpenChanged binding required CollapsibleTrigger manages toggle internallyContent always in ChildContent CollapsibleContent only renders when open
collapsible-trigger and collapsible-content are auto-installed as dependencies.
< Collapsible > < CollapsibleTrigger >Show details</ CollapsibleTrigger > < CollapsibleContent > < p class = "pt-2 text-sm text-muted-foreground" > Hidden content revealed on click. </ p > </ CollapsibleContent > </ Collapsible > < Collapsible > < CollapsibleTrigger > < div class = "flex items-center gap-2" > < span class = "font-medium" >Advanced options</ span > < Badge Variant = "BadgeVariant.Secondary" >3</ Badge > </ div > </ CollapsibleTrigger > < CollapsibleContent > < div class = "mt-2 space-y-2 rounded-md border p-3 text-sm" > < p >Option 1</ p > < p >Option 2</ p > < p >Option 3</ p > </ div > </ CollapsibleContent > </ Collapsible > < Collapsible IsOpen = "true" > < CollapsibleTrigger >Already expanded</ CollapsibleTrigger > < CollapsibleContent > < p class = "pt-2 text-sm" >This starts visible.</ p > </ CollapsibleContent > </ Collapsible > Parameter Type Default Description IsOpenboolfalseInitial open state DisabledboolfalsePrevents toggling Classstring?nullAdditional CSS classes ChildContentRenderFragment— CollapsibleTrigger + CollapsibleContent
Parameter Type Default Description ChildContentRenderFragment— Button label / content
Parameter Type Default Description ChildContentRenderFragment— Content shown when open
