Collapsible

A region that expands and collapses. Compose three parts: Collapsible (state owner), CollapsibleTrigger (toggles it), and CollapsibleContent (the animated-height body).

Open state can be controlled (open + onOpenChange) or uncontrolled (defaultOpen). The trigger accepts asChild to reuse your own button/element.

@peduarte starred 3 repositories

@radix-ui/primitives

@radix-ui/colors

@stitches/react

Props

`Collapsible`

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state. Omit for uncontrolled.
`defaultOpen`	`boolean`	`false`	Initial state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	—	Fired with the next state on toggle.
`disabled`	`boolean`	`false`	Blocks toggling.

`CollapsibleTrigger`

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the single child as the trigger, merging handlers/classes.

`CollapsibleContent`

Prop	Type	Default	Description
`className`	`string`	—	Classes on the inner content element.