Collapsible
An interactive disclosure component that expands and collapses content, useful for progressive disclosure patterns like expandable navigation menus, settings panels, and sidebar sub-items.
Default
A basic uncontrolled
Collapsible component that manages its own open/closed state internally. The CollapsibleTrigger wraps a button that toggles the visibility of the CollapsibleContent below. Content animates smoothly using a CSS grid transition.Controlled
A controlled
Collapsible where the parent component manages the open state via @bind-Open. This allows you to read or programmatically set the state from other parts of your UI. The button label updates dynamically based on the current state.Settings Panel
A real-world settings panel pattern combining
Collapsible with form controls. Set DefaultOpen to true to render the collapsible expanded initially. The trigger uses a gear icon for a compact toggle, and the content area contains labeled switch toggles for configuration options.Disabled
Set
Disabled to true on the Collapsible to prevent any user interaction. The disabled state propagates to the trigger button through the internal context, adding the disabled HTML attribute and preventing toggle events from firing.