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.
Show shipping details
Controlled
Drive open state externally with v-model:open.
Disabled
Set disabled to lock the block so the trigger cannot toggle it.
Locked section
API Reference
Props, events, and slots for each sub-component.
Collapsible
Props
| 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. |
Events
| Event | Description |
|---|---|
| update:open | Fires when the open state changes. Enables v-model:open. |
Slots
| Slot | Description |
|---|---|
| default | Scoped slot exposing { open } alongside the trigger and content. |
CollapsibleTrigger
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge props onto the child element. Forwards to reka-ui CollapsibleTrigger. |
Slots
| Slot | Description |
|---|---|
| default | The element that toggles the panel. |
CollapsibleContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| forceMount | boolean | false | Keep content mounted while collapsed. Forwards to reka-ui CollapsibleContent. |
Slots
| Slot | Description |
|---|---|
| default | Content revealed when open. |