Navigation
Collapsible
A single expand/collapse panel — any trigger content toggling any panel content, height-animated open. The one-off, roll-your-own building block behind `Accordion`'s multi-item list.
<UiCollapsible />Disabled
disabled is the trigger stops responding — to clicks and to the keyboard — and a closed panel stays closed.
Open
Pass it — usually as v-model:open — when something outside the collapsible has to be able to open and close it.
Both the trigger and content slots receive { open }, so the trigger can flip its own icon (e.g. a UiIcon whose :icon switches between 'caretDown'/'caretUp') without this component baking in an indicator of its own — same reasoning as Accordion not owning the icon either.
The open/close animation is the same height: 0 → scrollHeight → auto measure-and-transition recipe Accordion uses internally — height: auto itself can't be transitioned, so it measures the real content height on enter/leave and animates toward/from that instead.
Default open
defaultOpen is the uncontrolled starting state. Note the trigger flips its own icon from the open scoped slot prop — the collapsible renders no chevron of its own.
v2.4.0 — Added dark mode, fixed a scroll-jank bug in the sidebar, and trimmed the bundle by 12kb.
The default slot is the trigger — it isn't wrapped in a real <button>, just a <div> with a click handler, so you can put a UiButton (or anything else) directly inside without ending up with a button nested in a button. If you pass plain non-interactive content instead (bare text, an icon), you lose keyboard operability — wrap it in your own focusable element to keep it accessible.
Unmount on hide
unmountOnHide is on by default, so the panel's contents are destroyed while closed. Set it to false and the panel stays mounted — the textarea below keeps what you typed across toggles instead of starting over.
unmountOnHide (default true) fully removes the panel from the DOM while closed, so it re-renders fresh next open. Set it to false to keep it mounted and just hidden instead, when the panel holds state worth preserving across toggles — a scroll position, an in-progress form.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
booleanbooleantrueSlots
defaultcontentEmits
update:open[value: boolean]