Collapsible

A section the user can expand and collapse.

1<template>2  <Collapsible v-model:open="open" label="Toggle">3    <template #content>4      <p>Content</p>5    </template>6  </Collapsible>7</template>

Props

Name	Type	Default
label	string	-
open	boolean	-
defaultOpen	boolean	false
disabled	boolean	false
unmountOnHide	boolean	true
...props	UCollapsible props (as, class, ui)	-

Slots

Name	Description
default	Overrides the built-in `label` trigger with a fully custom one, scoped with `open` (the current expanded state) - e.g. to rotate a chevron icon or show a richer trigger row.
content	The collapsible panel's content.

Guidelines

Do

Scope the trigger's own visual affordance (a chevron, an eye icon, whatever signals expand/collapse) to the caller - the default slot is scoped with open for exactly that, e.g. :class="{ 'rotate-180': open }" on a chevron icon.
Use v-model:open when something else needs to read or drive the expanded state (e.g. expand/collapse-all across a list); use defaultOpen for a self-contained disclosure nobody else cares about.
Pass :unmount-on-hide="false" when the collapsed content holds state worth keeping alive (an open diff view, a mid-edit form) instead of being destroyed and rebuilt on every toggle.

Don't

Don't reach for Dialog or Drawer for content that should stay inline in the page's own flow - Collapsible doesn't overlay or trap focus.
Don't put essential content only inside a collapsed panel with no indication it exists - the trigger needs its own visible label or icon, not just a bare click target.