Prepared Docs

Use Collapsible, CollapsibleTrigger, and CollapsibleContent when a section should hide or reveal body copy without accordion chrome. The default export wires a trigger slot; compose CollapsibleContent as a sibling following Radix patterns.

Props

Collapsible root

Name	Type	Default	Description
`className`	`string`	—	Additional CSS class name applied to the collapsible container.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`((open: boolean) => void)`	—	Callback fired when the open state changes.
`open`	`boolean`	—	Controlled open state of the collapsible section.
`triggerWrap`	`boolean`	`true`	When true (default), the entire child tree is the trigger. Set false and wrap only the header in {@link CollapsibleTrigger} when content contains nested controls or padded gutters that must not toggle.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default

Default Open

Controlled

Example

Collapsible / Usage

Collapsible / Accessibility

Props

Collapsible root

Name	Type	Default	Description
`className`	`string`	—	Additional CSS class name applied to the collapsible container.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`((open: boolean) => void)`	—	Callback fired when the open state changes.
`open`	`boolean`	—	Controlled open state of the collapsible section.
`triggerWrap`	`boolean`	`true`	When true (default), the entire child tree is the trigger. Set false and wrap only the header in {@link CollapsibleTrigger} when content contains nested controls or padded gutters that must not toggle.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default

Default Open

Controlled

Example

Collapsible / Usage

Collapsible / Accessibility