Collapsible

A panel controlled by a button. There is no border. An open trigger rests on the wash, and hover and focus shift that wash. The trigger is rounded and Regular.

Anatomy

<UiCollapsibleRoot>
  <UiCollapsibleTrigger />
  <UiCollapsiblePanel />
</UiCollapsibleRoot>

Examples

Open

defaultOpen shows the panel on first render. Use open / @update:open for a controlled collapsible.

alien-bean-pasta

wild-irish-burrito

horse-battery-staple

<UiCollapsibleRoot :default-open="true">
  <UiCollapsibleTrigger>Recovery keys</UiCollapsibleTrigger>
  <UiCollapsiblePanel><!-- ... --></UiCollapsiblePanel>
</UiCollapsibleRoot>

Hidden until found

hiddenUntilFound hides the closed panel with hidden="until-found" so find-in-page (Ctrl+F / Cmd+F) can still search it and open the panel on a match. Closed content stays in the DOM, which also keeps it indexable. Search for “business days”.

<UiCollapsibleRoot hidden-until-found>
  <UiCollapsibleTrigger>Shipping details</UiCollapsibleTrigger>
  <UiCollapsiblePanel>
    Standard shipping takes 3–5 business days.
  </UiCollapsiblePanel>
</UiCollapsibleRoot>

Older browsers that don’t support hidden="until-found" keep the panel hidden until the trigger opens it.

Disabled

disabled ignores presses and sets data-disabled.

<UiCollapsibleRoot disabled>
  <UiCollapsibleTrigger>Recovery keys</UiCollapsibleTrigger>
  <UiCollapsiblePanel><!-- ... --></UiCollapsiblePanel>
</UiCollapsibleRoot>

API reference

Root

Groups all parts of the collapsible. Renders a <div>.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`open`	`boolean`	—	Controlled open state (`v-model:open`).
`disabled`	`boolean`	`false`	Ignore interaction.
`hiddenUntilFound`	`boolean`	`false`	Apply `hidden="until-found"` to the closed panel. Overrides `keepMounted`.
`keepMounted`	`boolean`	`false`	Keep the panel in the DOM while closed. Ignored when `hiddenUntilFound` is set.

Event	Type	Description
`@update:open`	`(open: boolean) => void`	Emitted when the panel opens or closes.

Attribute	Description
`data-open`	Present when the collapsible is open.
`data-closed`	Present when the collapsible is closed.
`data-disabled`	Present when the collapsible is disabled.
`data-starting-style`	Present while the panel is animating in.
`data-ending-style`	Present while the panel is animating out.

Trigger

A button that opens and closes the panel. Renders a <button> by default. Sets aria-expanded and aria-controls. The caret rotates 90° when data-panel-open is set.

Prop	Type	Default	Description
`nativeButton`	`boolean`	`true`	Render a native `<button>`. Set `false` to render a `span` with button semantics.

Attribute	Description
`data-panel-open`	Present when the panel is open.
`data-disabled`	Present when the collapsible is disabled.

Panel

The collapsible contents. Renders a <div role="region">. Height uses --collapsible-panel-height with a 150ms CSS transition (no animation library).

Prop	Type	Default	Description
`hiddenUntilFound`	`boolean`	`false`	Searchable closed panel. Overrides `keepMounted`.
`keepMounted`	`boolean`	`false`	Keep this panel mounted while closed. Root `keepMounted` still applies.

Attribute	Description
`data-open`	Present when the panel is open.
`data-closed`	Present when the panel is closed.
`data-starting-style`	Present while the panel is animating in.
`data-ending-style`	Present while the panel is animating out.

CSS variable	Description
`--collapsible-panel-height`	The panel’s height.
`--collapsible-panel-width`	The panel’s width.