◇

Collapsible

3 parts

An interactive component that expands and collapses a panel of content. CollapsibleRoot owns the open/closed state (controlled via v-model:open or uncontrolled via defaultOpen), provides it to the Trigger and Content parts, and reflects it as data-state. Use it for show/hide disclosures such as "read more" sections, FAQ entries, or settings panels.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  CollapsibleRoot,
  CollapsibleTrigger,
  CollapsibleContent,
} from '@robonen/primitives/disclosure/collapsible';

<CollapsibleRoot>
  <CollapsibleTrigger />
  <CollapsibleContent />
</CollapsibleRoot>

API Reference

CollapsibleRoot

Root

An interactive component that expands and collapses a panel of content. `CollapsibleRoot` owns the open/closed state (controlled via `v-model:open` or uncontrolled via `defaultOpen`), provides it to the `Trigger` and `Content` parts, and reflects it as `data-state`. Use it for show/hide disclosures such as "read more" sections, FAQ entries, or settings panels.

Prop	Type	Default	Description
`defaultOpen`?	`boolean`	—	—
`disabled`?	`boolean`	—	—
`unmountOnHide`?	`boolean`	—	Keep the content mounted while closed instead of unmounting it. When `false`, the closed content stays in the DOM and is rendered with `hidden="until-found"` so the browser's find-in-page can locate and reveal it. Defaults to `true` (closed content is unmounted).
`open`?	`boolean`	—	Two-way bound value (`v-model:open`).

Emits

Event	Payload
`update:open`	`[value: boolean]`

CollapsibleTrigger

Trigger

The button that toggles the collapsible open and closed. Wires up `aria-expanded`, `aria-controls`, and the disabled state from the root, and renders as a `<button>` by default.

No props or events — renders its element and forwards attributes.

CollapsibleContent

Content

The panel revealed when the collapsible is open. Mounts and unmounts with the open state (via `Presence`), is referenced by the trigger's `aria-controls`, and is hidden from layout and assistive tech while closed. While transitioning it measures its natural size and exposes `--collapsible-content-height` / `--collapsible-content-width` CSS variables so consumers can drive height/width transitions purely from CSS.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Render the content even when closed (useful for animation control).