Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
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.
Loading example…
Open by Default
Start with the content expanded. Set
DefaultOpen to true so the CollapsibleContent is visible on initial render.
Loading example…
Controlled
Control the open state externally with
@bind-Open. The parent component manages the Open parameter and receives updates via OpenChanged.
Loading example…
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