Collapsible
Single disclosure region. The content is removed from the DOM while collapsed, so hidden details are never tabbable.
Preview
Live preview
Usage
Examples
Disclosure with a chevron
<Collapsible>
<CollapsibleTrigger asChild>
<button className="flex items-center gap-2 text-sm font-medium">
Advanced settings
<ChevronDown aria-hidden />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<AdvancedSettingsForm />
</CollapsibleContent>
</Collapsible>Controlled
Open by default via defaultOpen.
const [open, setOpen] = useState(false)
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger>{open ? "Hide" : "Show"} rows</CollapsibleTrigger>
<CollapsibleContent>…</CollapsibleContent>
</Collapsible>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open / defaultOpen | boolean | false | Controlled or uncontrolled expanded state. |
| onOpenChange | (open: boolean) => void | — | Fires when the trigger toggles the region. |
| disabled | boolean | false | Blocks the trigger. |
| CollapsibleTrigger | ReactNode | — | The control that toggles the region; gets aria-expanded automatically. |
| CollapsibleContent | ReactNode | — | The region itself; unmounted while collapsed. |
Accessibility
Accessibility notes
- The trigger renders aria-expanded and controls the region via aria-controls.
- Collapsed content is unmounted, so focus order never contains invisible items.
- The region animates opacity only (vert-fade-in/out) and is neutralised by the reduced-motion override.
- A button-like trigger is required — do not use a bare div; CollapsibleTrigger accepts asChild for that reason.