Collapsible Primitive
Unstyled, accessible primitive component for building custom collapsibles.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
CollapsibleTrigger renders its own button element.
With AsChild
Button receives click behavior via TriggerContext.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling.
Controlled State
Control the primitive state externally.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
ARIA Attributes
- ✓
aria-expandedautomatically applied to trigger - ✓
data-stateattribute for CSS styling (open|closed) - ✓
role="region"on content with proper aria-hidden - ✓ Focus management with visible focus indicators
- ✓ Proper disabled attribute and behavior
Keyboard Shortcuts
Navigate and interact with collapsibles using keyboard.
API Reference
Component properties and parameters.
Collapsible
Open
Type: bool
Default: false
Controls whether the collapsible is expanded. Supports two-way binding with @bind-Open.
OpenChanged
Type: EventCallback<bool>
Callback invoked when the open state changes.
Disabled
Type: bool
Default: false
Prevents toggling when true.
CollapsibleTrigger
ChildContent
Type: RenderFragment?
Content rendered inside the trigger button.
CollapsibleContent
ChildContent
Type: RenderFragment?
Content to be shown/hidden when collapsible is toggled.
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Collapsible Primitive
- ✓ Building a custom design system
- ✓ Need complete control over styling
- ✓ Want to apply your own CSS framework
- ✓ Creating unique visual designs
Use Styled Component
- ● Want shadcn/ui design out of the box
- ● Need quick implementation
- ● Like the default styling
- ● Prefer convention over configuration