Collapsible

A single show/hide panel toggled by a button, from @clerk/headless. It is a headless primitive: it supplies behavior, state, ARIA wiring, and the expand/collapse animation lifecycle, but ships no styles — you bring your own CSS by targeting the data-* attributes each part emits.

Example

The demo below is intentionally unstyled — it renders the raw primitive so you can see its behavior and ARIA wiring. Click the trigger to expand and collapse.

Usage

import { Collapsible } from '@clerk/headless/collapsible';

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Panel>Hidden content</Collapsible.Panel>
</Collapsible.Root>

Controlled

const [open, setOpen] = useState(false);

<Collapsible.Root
  open={open}
  onOpenChange={setOpen}
>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Panel>Hidden content</Collapsible.Panel>
</Collapsible.Root>

Parts

Part	Default Element	Description
`Collapsible.Root`	`<div>`	Root wrapper, provides context
`Collapsible.Trigger`	`<button>`	Clickable toggle that opens/closes
`Collapsible.Panel`	`<div>`	Collapsible content area

All parts accept a render prop for polymorphic rendering and standard HTML attributes for their default element.

Props

`Collapsible.Root`

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes
`disabled`	`boolean`	`false`	Prevents the trigger from toggling

Collapsible.Trigger and Collapsible.Panel take no additional props beyond standard HTML attributes for their default element.

Styling

Each part emits data-* attributes you can target with any CSS solution:

Attribute	Applies To	Description
`data-open`	Root, Trigger, Panel	Present when the panel is open
`data-closed`	Root, Trigger, Panel	Present when the panel is closed
`data-disabled`	Root, Trigger	Present when disabled

Collapsible.Panel also exposes --collapsible-panel-height / --collapsible-panel-width (its measured dimensions) for height/width-based animations:

.cl-collapsible-panel {
  overflow: hidden;
  height: var(--collapsible-panel-height);
  transition: height 200ms ease;
}
.cl-collapsible-panel[data-closed] {
  height: 0;
}