Components

Collapsible

An interactive panel that expands and collapses a region of content, driven by a single trigger element.

Basic usage

Compose Collapsible, a CollapsibleTrigger, and CollapsibleContent. Pass defaultOpen for an uncontrolled panel.

Engineering team

@thanh

@felix

@minh

Use asChild to make any element the trigger — here a full-width Button. The content is unmounted while collapsed.

Prop	Type	Default	Description
`defaultOpen`	boolean	`false`	Open state when the component is uncontrolled. Use this for self-managed panels.
`open`	boolean	`—`	Controlled open state. Pair with onOpenChange to drive the panel yourself.
`onOpenChange`	(open: boolean) => void	`—`	Called whenever the open state changes, including via keyboard.
`disabled`	boolean	`false`	Prevents the trigger from toggling and marks the content non-interactive.
`asChild`	boolean	`false`	On CollapsibleTrigger, merges props onto its single child instead of rendering a button.
`className`	string	`—`	Additional Tailwind classes to merge onto the underlying element.

The trigger exposes aria-expanded and aria-controls, wiring it to the content region automatically.
The trigger is a native button, so Enter and Space toggle the panel out of the box.
When using asChild, give icon-only triggers an aria-label so screen readers announce their purpose.
Setting disabled propagates data-disabled to every part for consistent styling and behavior.