Collapsible

Overlay

A simple expand/collapse toggle for progressive disclosure. Lighter alternative to Accordion.

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Open/closed state (v-model).
`title`	`string`	—	Default trigger button label.
`disabled`	`boolean`	`false`	Prevent expanding.

Examples

Default trigger

vue

<script setup lang="ts">
const open = ref(false)
</script>
<template>
  <DsCollapsible v-model="open" title="Advanced options">
    <div class="pt-2 space-y-2 text-sm text-ds-fg-muted">
      <p>Additional settings appear here when expanded.</p>
    </div>
  </DsCollapsible>
</template>

Accessibility

Trigger button has aria-expanded.
Custom trigger via slot:trigger with (open, toggle) props.

Banner

ConfirmDialog