Navigation
Collapsible
One thing that opens, on its own.
When to reach for it
Examples
default
Notes
Radix Collapsible root, as a typed passthrough.
Props
Takes no props of its own.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
CollapsibleSection
One thing that opens, on its own.
The difference from Accordion is arithmetic: an accordion is a SET, and a set can coordinate — opening one closes another. A collapsible is one disclosure with nothing to coordinate with. Reaching for an accordion of one gets you a component managing a value you never read.
The marker here is a chevron rather than the accordion's plus, and deliberately: this reveals more of the same thing, where an accordion row opens a distinct answer.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| titlerequired | ReactNode | What the trigger says. |
Also accepts everything in Omit<ComponentProps<typeof CollapsiblePrimitive.Root>, 'children' | 'title'>. Those are forwarded to the underlying element and are not listed row by row.
Re-exports
Collapsible = CollapsiblePrimitive.RootRadix Collapsible root, as a typed passthrough.
Keyboard
| Key | Does |
|---|---|
| EnterSpace | Opens or closes it. |