Collapsible

Animated disclosure — click to expand or collapse content with a smooth height transition.

VeloxUI includes 3 layout components

veloxui/container

veloxui/splitter

veloxui/scrollbar

<script setup lang="ts">
import { VxCollapsible, VxCollapsibleContent, VxButton } from 'veloxui'
</script>

<template>
  <VxCollapsible>
    <template #default="{ open, toggle }">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <span>VeloxUI includes 3 layout components</span>
        <VxButton variant="ghost" size="sm" @click="toggle">
          <svg :style="{ transform: open ? 'rotate(180deg)' : '' }">
            <!-- chevron down icon -->
          </svg>
        </VxButton>
      </div>

      <div>veloxui/container</div>

      <VxCollapsibleContent>
        <div>veloxui/splitter</div>
        <div>veloxui/scrollbar</div>
      </VxCollapsibleContent>
    </template>
  </VxCollapsible>
</template>

Controlled

Use v-model to control the open state from outside.

^closed

This content is controlled via v-model. Toggle it with the button above or programmatically.

<script setup lang="ts">
import { ref } from 'vue'
import { VxCollapsible, VxCollapsibleContent, VxButton } from 'veloxui'

const isOpen = ref(false)
</script>

<template>
  <VxButton @click="isOpen = !isOpen">
    {{ isOpen ? 'Close' : 'Open' }}
  </VxButton>

  <VxCollapsible v-model="isOpen">
    <VxCollapsibleContent>
      <p>Controlled content.</p>
    </VxCollapsibleContent>
  </VxCollapsible>
</template>

Default Open

Start expanded on mount.

VeloxUI includes 30+ components: Button, Input, Select, Transfer, Calendar, Accordion, Card, Avatar, Badge, Checkbox, Upload, and many more — all built with Vue 3 and TypeScript.

<template>
  <VxCollapsible default-open>
    <template #default="{ open, toggle }">
      <button @click="toggle">What components are in VeloxUI?</button>
      <VxCollapsibleContent>
        <p>VeloxUI includes 30+ components...</p>
      </VxCollapsibleContent>
    </template>
  </VxCollapsible>
</template>

Inside a Card

Advanced Settings

Configure optional features

---

Debug mode

Enable verbose logging

Beta features

Try experimental features

<template>
  <VxCard>
    <VxCollapsible default-open>
      <template #default="{ open, toggle }">
        <div style="display: flex; align-items: center; justify-content: space-between; padding: 24px;">
          <div>
            <div>Advanced Settings</div>
            <div>Configure optional features</div>
          </div>
          <VxButton variant="ghost" size="sm" @click="toggle">
            <svg :style="{ transform: open ? 'rotate(180deg)' : '' }">...</svg>
          </VxButton>
        </div>
        <VxCollapsibleContent>
          <VxCardDivider />
          <div style="padding: 24px;">
            <!-- settings content -->
          </div>
        </VxCollapsibleContent>
      </template>
    </VxCollapsible>
  </VxCard>
</template>

Disabled

You won't see this.

Components

Component	Element	Description
VxCollapsible	<div>	Root — manages state, slot exposes { open, toggle }
VxCollapsibleTrigger	<button>	Optional trigger button, slot exposes { open }
VxCollapsibleContent	<div>	Animated content with height transition

Props

Prop	Type	Default	Description
modelValue	boolean	—	Controlled open state (v-model)
defaultOpen	boolean	false	Initial open state
disabled	boolean	false	Disable toggle

Events

Event	Type	Description
update:modelValue	(boolean)	Open state changed