Collapsible

Show/hide a single block of content. A simpler primitive than Accordion when you do not need multiple panels or item-level state.

Default

Single togglable block.

The classic pattern: a summary row stays visible while the rest tucks behind a ghost icon trigger.

@radix-ui/primitives

Reveal advanced options inside a card. The trigger row flips a chevron as it opens.

Nest collapsibles to build a disclosure tree with folders and files.

App.vue

main.ts

Drive open state externally with v-model:open.

Set disabled to lock the block so the trigger cannot toggle it.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Open state. Supports v-model:open.
`defaultOpen`	`boolean`	`false`	Initial open state when v-model is not used.
`disabled`	`boolean`	`false`	Prevent toggling.

Event	Description
`update:open`	Fires when the open state changes. Enables v-model:open.

Slot	Description
`default`	Scoped slot exposing { open } alongside the trigger and content.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element. Forwards to reka-ui CollapsibleTrigger.

Slot	Description
`default`	The element that toggles the panel.

Prop	Type	Default	Description
`forceMount`	`boolean`	`false`	Keep content mounted while collapsed. Forwards to reka-ui CollapsibleContent.

Slot	Description
`default`	Content revealed when open.