Components

Collapsible

A UI element that expands or collapses content on interaction, commonly used to improve content organization.

Component

View code

Show playground

Props

Props	Default	Type
`modelValue`	—	`boolean`
`title`	`'Item title'`	`string`
`titleClass`	—	`string`
`titleWrapperClass`	—	`string`
`actionsWrapperClass`	—	`string`
`buttonSize`	`ButtonSize.MD`	`ButtonSize`

Slots

Name	Description
`default`	Slot to render the collapsible content
`title-suffix`	Template to render content right after the title, such as a badge or an icon.
`header-suffix`	Template to render content before the expand/collapse icon button, such as buttons or other components.

 <template>
    <Collapsible
        title="My collapsible title"
    >
        <!-- Insert content here -->
    </ActionPanel>
</template>

Usage

modelValue

Provides a way to control the open/closed state of the collapsible from a parent component. By default default, it handles open state internally.

modelValue is particularly useful when you want to trigger toggle state from outside of the collapsiable or from the slot itself.

 <template>
    <Collapsible 
        v-model="isOpen" 
        title="My collapsible title"
    >
        <button @click="isOpen = false">Close from inside</button>
    </Collapsible>

    <button @click="isOpen = true">Open from outside</button>
</template>
<script setup lang="ts">
const isOpen = ref(false)
</script>

### title
Collapsible item title.

```vue
<template>
    <Collapsible
        title="My collapsible title"
    >
        <!-- Insert content here -->
    </ActionPanel>
</template>

Type: string
Default: 'Item title'

titleClass

Adds extra classes to the title <span>, appended after the base styling.

 <template>
    <Collapsible
        title="My collapsible title"
        titleClass="text-lg"
    >
        <!-- Insert content here -->
    </Collapsible>
</template>

Type: string

titleWrapperClass

Adds extra classes to the wrapper <div> around the title and the title-suffix slot, appended after the base styling.

 <template>
    <Collapsible
        title="My collapsible title"
        titleWrapperClass="items-center"
    >
        <!-- Insert content here -->
    </Collapsible>
</template>

Type: string

actionsWrapperClass

Adds extra classes to the wrapper <div> around the header-suffix slot and the expand/collapse icon button, appended after the base styling.

 <template>
    <Collapsible
        title="My collapsible title"
        actionsWrapperClass="items-center"
    >
        <!-- Insert content here -->
    </Collapsible>
</template>

Type: string

buttonSize

Controls the size of the expand/collapse icon button via ButtonSize enum.

 <template>
    <Collapsible
        title="My collapsible title"
        :buttonSize="ButtonSize.LG"
    >
        <!-- Insert content here -->
    </Collapsible>
</template>

Type: ButtonSize
Default: ButtonSize.MD

Options

Value	Description
`XS`	xs
`SM`	sm
`MD`	md
`LG`	lg
`XL`	xl
`XXL`	2xl