Collapsible
A single section that can be expanded or collapsed. For multiple independent sections use Accordion with type='multiple'.
Show-more list (chevron rotates on open)
@peduarte starred 3 repositories
@radix-ui/primitives
Advanced options (outline trigger)
Installation
pnpm
pnpm dlx @hex-core/cli add collapsibleAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Default open state |
onOpenChange | function | — | Callback on open change: (open: boolean) => void |
disabled | boolean | false | Disable toggling |
AI Guidance
When to use
Use for a single show-more/show-less section: 'View full details', 'Advanced settings', preview cards with expandable notes.
When not to use
Don't use for multiple related sections (use Accordion). Don't use for overlays (use Dialog/Popover). Don't use for navigation (use DropdownMenu).
Common mistakes
- Using Collapsible for multiple sections instead of Accordion
- Missing asChild when passing a Button as trigger
- Not animating content height (Radix exposes --radix-collapsible-content-height for CSS keyframes)
Accessibility
Radix sets aria-expanded on the trigger and aria-controls → content id. Trigger is keyboard-operable (Enter/Space).
Related components
Token budget: 250