Collapsible
Collapsible Primitive
Unstyled, accessible primitive component for building custom collapsibles.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
CollapsibleTriggerPrimitive 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.
Included by default
aria-expanded, data-state, role="region", focus and disabled behavior.
Keyboard Shortcuts
Navigate and interact with collapsibles using keyboard.
Navigate to trigger
Tab
Toggle collapsible
Space
Enter
API Reference
Component properties and parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Open | bool | false | Controls whether the collapsible is expanded. Supports two-way binding with @bind-Open. |
| OpenChanged | EventCallback<bool> | — | Callback invoked when the open state changes. |
| Disabled | bool | false | Prevents toggling when true. |
| ChildContent | RenderFragment? | — | Content rendered inside trigger/content primitives. |
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