Collapsible

Collapsible is a compound component for one expandable region with a trigger and content surface.

Overview

Collapsible has a small styling contract centered on content height transitions. The root itself does not expose a large variable surface, so most theming happens through the trigger and surrounding layout.

Public CSS Variables

VAT ID, invoice email and legal address.

Variable	Value	Affects
Height transition timing.`CollapsibleContent`		No visible change in this state
Measured content height used during open transition.`CollapsibleContent`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Collapsible: root state owner without a dedicated style module.
CollapsibleTrigger: styling comes from the rendered trigger element or asChild surface.
CollapsibleContent: owns the height transition, overflow clipping, and hidden-state behavior.

State And Variant Interaction

Open and hidden state are related but not identical during transitions.
asChild composition means the visible trigger style often comes from another component, such as Button.
Dynamic content size can change the effective transition behavior if the content grows after first render.

Examples

.slowCollapsible {
  --transition-state-delay: 220ms;
}

.compactDisclosureButton {
  font-size: 14px;
}

Do Not Override

Do not hard-code --content-height; it is measured at runtime.
Do not hide overflow rules if the section still relies on height animation.
Do not assume trigger styling is owned by Collapsible when asChild is used.