Components

Collapsible

A collapsible element to toggle visibility of its content.

Usage

Use a Button or any other component in the default slot of the Collapsible.

Then, use the #content slot to add the content displayed when the Collapsible is open.

<template>
  <UCollapsible class="w-48">
    <UButton
      label="Open"
      color="gray"
      variant="subtle"
      trailing-icon="i-heroicons-chevron-down-20-solid"
      block
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </UCollapsible>
</template>

Disabled

Use the disabled prop to disable the Collapsible.

disabled

<template>
  <UCollapsible class="w-48" disabled>
    <UButton
      label="Open"
      color="gray"
      variant="subtle"
      trailing-icon="i-heroicons-chevron-down-20-solid"
      block
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </UCollapsible>
</template>

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

<script setup lang="ts">
const open = ref(true)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UCollapsible v-model:open="open" class="w-48">
    <UButton
      label="Open"
      color="gray"
      variant="subtle"
      trailing-icon="i-heroicons-chevron-down-20-solid"
      block
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </UCollapsible>
</template>

In this example, press O to toggle the Collapsible.

This allows you to move the trigger outside of the Collapsible or remove it entirely.

With rotating icon

Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.

<template>
  <UCollapsible class="w-48">
    <UButton
      class="group"
      label="Open"
      color="gray"
      variant="subtle"
      trailing-icon="i-heroicons-chevron-down-20-solid"
      :ui="{
        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      }"
      block
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </UCollapsible>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`disabled`		`boolean` When `true`, prevents the user from interacting with the collapsible.
`open`		`boolean` The controlled open state of the collapsible. Can be binded with `v-model`.
`defaultOpen`		`boolean` The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
`ui`		`Partial<{ root: string; content: string; }>`

Slots

Slot	Type
`default`	`{ open: boolean; }`
`content`	`{}`

Emits

Event	Type
`update:open`	`[value: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    collapsible: {
      slots: {
        root: 'flex flex-col gap-2',
        content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
      }
    }
  }
})

Chip

An indicator of a numeric value or a state.

CommandPalette

A command palette to search and execute commands with full-text search.