Collapsible
A single disclosure region toggled open and closed by its trigger
Category: display · WCAG 2.2-AA · disclosure, collapse, expand, toggle, show-hide
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Initial open state for uncontrolled use |
onOpenChange | (open: boolean) => void | — | Called whenever the open state should change |
trigger | ReactNode | — | Content rendered inside the built-in trigger button |
disabled | boolean | false | Disables the trigger button |
children | ReactNode | — | Content of the collapsible region |
Design tokens
--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-border--cascivo-color-bg-subtle--cascivo-radius-control--cascivo-focus-ring--cascivo-space-3--cascivo-duration-200--cascivo-ease-out
When to use
- Hiding a single secondary block until the user asks for it
- Progressive disclosure of details, advanced options, or supplementary text
- Toggling one region whose state you may want to control externally
When not to use
- Several mutually related sections — use Accordion instead
- Transient overlays anchored to a trigger — use Dropdown or Popover
How to build an accessible Collapsible in React →
Examples
Uncontrolled
<Collapsible trigger="Show details">
<p>Hidden content revealed on toggle.</p>
</Collapsible>Open by default
<Collapsible defaultOpen trigger="Details">
<p>Visible initially.</p>
</Collapsible>Related components
- Accordion — Multi-region disclosure; Collapsible is the single-region case