Collapsible
Shows and hides one region under a trigger. It is the unstyled Radix primitive: you bring the trigger (a Button with asChild) and the look. It is not an Accordion. Source: src/components/ui/collapsible.tsx.
Show more
The first items stay visible and the rest wait behind a ghost button whose label says what it will do.
Sources
Linear · LIN-482
GitHub · PR 1931
Row disclosure
A full-width row that opens its details, the way a tool call opens its input and output in a thread. The chevron turns 90° on the fast duration; under reduced motion it snaps.
Uncontrolled and disabled
defaultOpen with no state of your own. disabled freezes it where it is: flip the switch off and the trigger works again.
Retries: 3 · Timeout: 120s · Temperature: 0.2
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open / defaultOpen | boolean | false | Collapsible (Radix). Controlled or uncontrolled open state. |
| onOpenChange | (open: boolean) => void | — | Collapsible. Called when the trigger toggles it. |
| disabled | boolean | false | Collapsible. The trigger stops responding; the content keeps its current state. |
| asChild | boolean | false | CollapsibleTrigger. Put the trigger behaviour on your own Button. Without it the trigger is a bare, unstyled <button>. |
| forceMount | true | — | CollapsibleContent. Keep closed content in the DOM (hidden), e.g. for an exit animation or find-in-page. |
| ...props | Radix Collapsible parts | — | Every part only adds a data-slot and passes the rest through. No styling, no variants. Parts carry data-state="open" | "closed" for styling. |
Best practices
When to use
- Secondary detail that most people skip: tool call payloads, advanced options, the long tail of a list.
- Several sections where only one should be open at a time is an Accordion, which the system doesn't have yet.
Behavior
- Content mounts and unmounts with no height animation. That is the shipped behaviour; don't animate height per call.
- Turn the chevron with rotate only, on the fast duration, with motion-reduce:transition-none.
- Keep the trigger in the same place when it opens, so a second click closes it without hunting.
Accessibility
- Radix sets aria-expanded and aria-controls on the trigger. Always pass a real Button via asChild so it is focusable and has the focus ring.
- The trigger's text must describe the region; a lone chevron needs an aria-label.
Content
- Say what opens and how much: "Show 3 more", "Advanced options". Flip to "Show less" when open.
- Never hide something people need to finish the task.