Layout

Collapsible

Toggles the visibility of secondary content with animated height transitions.

idle

Usage

import {
	Collapsible,
	CollapsiblePanel,
	CollapsibleTrigger,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Collapsible>
	<CollapsibleTrigger />
	<CollapsiblePanel />
</Collapsible>

Uncontrolled disclosure panel for secondary configuration details.

Coordinates disclosure state through external state and event handlers.

Suppresses user interaction and preserves the closed panel state.

Preserves layout structure and text wrapping across responsive viewports.

Guidance	Practice
Do	Name the content being revealed and keep the trigger visible after expansion.

Guidance	Boundary
Scope	Use Accordion for related disclosure sections. Do not hide required input or critical errors.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`open`	`boolean`	`—`	Controls open state of the collapsible disclosure.
`defaultOpen`	`boolean`	`false`	Sets initial open state for uncontrolled disclosure.
`onOpenChange`	`(open: boolean, eventDetails: CollapsiblePrimitive.Root.ChangeEventDetails) => void`	`—`	Callback invoked when the open state changes.
`disabled`	`boolean`	`false`	Prevents user interaction and suppresses disclosure toggling.
`Collapsible`	`CollapsibleProps`	`"div"`	Root disclosure container that coordinates open state with a default div host.
`CollapsibleTrigger`	`CollapsibleTriggerProps`	`"button"`	Interactive trigger button with managed aria-expanded; supports render and nativeButton.
`CollapsiblePanel`	`CollapsiblePanelProps`	`"div"`	Animated disclosure panel with measured transitions; supports keepMounted and hiddenUntilFound. Place spacing on an inner container.
`CollapsiblePrimitive`	`typeof BaseCollapsible`	`—`	Low-level Base UI primitive escape hatch for custom composition.