Collapsible
A headless collapsible primitive for building expandable sections with full keyboard support.
Basic
A simple collapsible section. Click the
CollapsibleTrigger to toggle the visibility of CollapsibleContent.Open by Default
Start with the content expanded. Set
DefaultOpen to true so the CollapsibleContent is visible on initial render.Controlled
Control the open state externally with
@bind-Open. The parent component manages the Open parameter and receives updates via OpenChanged.Anatomy
Loading example…
Data Attributes
Use these data attributes for CSS styling:
[data-state="open"]- When expanded[data-state="closed"]- When collapsed[data-disabled]- When disabled