Collapsible
React collapsible disclosure built on Radix for a single show-hide region, with your own trigger button, an open-by-default option, and a chevron pattern.
Collapsible shows and hides one panel. Bring your own trigger button; keyboard and ARIA wiring come built in.
When to use
Use Collapsible to hide optional detail behind a trigger: advanced filters, "Show more" in a summary, or a long explanation under a field. Keep the trigger label clear about what it reveals.
For several stacked sections, use Accordion.
Examples
Props
Props declared by Collapsible. Native attributes of the underlying element pass through.
<Collapsible>
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | ||
open | boolean | ||
disabled | boolean | ||
onOpenChange | (open: boolean) => void | ||
asChild | boolean |
<CollapsibleTrigger>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean |
<CollapsibleContent>
| Prop | Type | Default | Description |
|---|---|---|---|
forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | |
asChild | boolean |
Accessibility
The trigger exposes aria-expanded and aria-controls, so its state and target are announced. Space and Enter toggle it.
Use a real button as the trigger. If you add a chevron, keep it decorative and let the label carry the meaning.