Collapsible

A standalone show/hide primitive for a single block of content, with the same smooth height animation as Accordion. Use it for things like "Show more details" or a single toggleable section outside of a grouped list.

ExamplesCodeUsageChangelog

Examples

Default (uncontrolled)

Uses defaultOpen and manages its own state internally.

This is the collapsible content. It can contain any markup — text, images, forms, or other components.

Tailwind v4

<Collapsible :default-open="true">
  <template #trigger="{ open, toggle }">
    <button type="button" @click="toggle">
      {{ open ? 'Hide' : 'Show' }} details
    </button>
  </template>
  This is the collapsible content.
</Collapsible>

Default trigger slot

If no trigger slot is provided, a simple "Toggle" button with a chevron is rendered.

Tailwind v4

<Collapsible>
  More information appears here once expanded.
</Collapsible>

Controlled (v-model:open)

Tailwind v4

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <Collapsible v-model="open">
    <template #trigger="{ open, toggle }">
      <button @click="toggle">{{ open ? 'Collapse' : 'Expand' }}</button>
    </template>
    Controlled content driven by a parent-owned v-model value.
  </Collapsible>
</template>

Disabled

Tailwind v4

<Collapsible :disabled="true">
  This content cannot be toggled.
</Collapsible>

Props

Prop	Type	Default	Description
modelValue	boolean	undefined	Controlled open state. When provided, the component becomes controlled and defaultOpen is ignored. Pair with v-model:open (or v-model via the modelValue/update:modelValue convention).
defaultOpen	boolean	false	Initial open state for uncontrolled usage (only used when modelValue is not provided).
disabled	boolean	false	Prevents toggling and dims the default trigger.

Slots

Slot	Props	Description
trigger	{ open, toggle }	The clickable header/label. Falls back to a default "Toggle" button with a chevron icon if not provided.
default	—	The collapsible content region.