Switch

Toggle switch with labels, icons, loading, async confirmation, and custom values.

false

<script setup lang="ts">
const value = ref(false)
</script>

<template>
  <VxSwitch v-model="value" />
</template>

With Label

Enable notificationsDark modeSwitch between light and dark theme

<template>
  <VxSwitch v-model="value" label="Enable notifications" />
  <VxSwitch v-model="value" label="Dark mode" description="Switch between themes" />
</template>

Active / Inactive Text

OffOnNoYes

<template>
  <VxSwitch active-text="On" inactive-text="Off" />
</template>

Inline Text

Text inside the track.

ONOFFYNYESNO

<template>
  <VxSwitch active-text="ON" inactive-text="OFF" inline-text />
</template>

Icons

🌙

<template>
  <VxSwitch v-model="value">
    {{ value ? '🌙 Dark' : '☀️ Light' }}
  </VxSwitch>
</template>

Custom Colors

<template>
  <VxSwitch active-color="#22c55e" />
  <VxSwitch active-color="#ef4444" inactive-color="#374151" />
</template>

Custom Values

Use non-boolean values.

LightDark

v-model: "dark"

DisabledEnabled

v-model: 1 (number)

<template>
  <VxSwitch v-model="theme" active-value="dark" inactive-value="light" />
  <!-- v-model: "dark" or "light" -->

  <VxSwitch v-model="status" :active-value="1" :inactive-value="0" />
  <!-- v-model: 1 or 0 -->
</template>

Sizes

xssmdefaultlgxl

<template>
  <VxSwitch size="xs" />
  <VxSwitch size="sm" />
  <VxSwitch />
  <VxSwitch size="lg" />
  <VxSwitch size="xl" />
</template>

Square

<template>
  <VxSwitch square />
</template>

Loading

<template>
  <VxSwitch v-model="value" loading />
</template>

Before Change (Async)

Ask for confirmation before toggling.

Confirm before toggle

true

<script setup>
async function beforeChange() {
  return confirm('Are you sure?')
}
</script>

<template>
  <VxSwitch v-model="value" :before-change="beforeChange" />
</template>

Readonly

On (readonly)Off (readonly)

<template>
  <VxSwitch :model-value="true" readonly />
</template>

Disabled

<template>
  <VxSwitch disabled />
</template>

Reverse Layout

Place the switch on the right side of the label.

Wi-FiConnect to wireless networksBluetoothEnable Bluetooth connectivityAirplane mode

<template>
  <VxSwitch v-model="value" label="Wi-Fi" description="..." reverse />
</template>

Press Animation

The thumb stretches when pressed, providing tactile feedback. Try pressing and holding any switch above to see the effect.

Props

Prop	Type	Default	Description
modelValue	boolean | string | number	false	Value (v-model)
activeValue	boolean | string | number	true	Value when on
inactiveValue	boolean | string | number	false	Value when off
disabled	boolean	false	Disable
loading	boolean	false	Loading spinner
readonly	boolean	false	Read only
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Size
activeColor	string	''	On color
inactiveColor	string	''	Off color
activeText	string	''	Text when on
inactiveText	string	''	Text when off
activeIcon	Component	—	Icon when on (inside thumb)
inactiveIcon	Component	—	Icon when off (inside thumb)
inlineText	boolean	false	Show text inside track
label	string	''	Label text
description	string	''	Description below label
square	boolean	false	Square shape
beforeChange	() => boolean | Promise<boolean>	—	Async guard before toggle
required	boolean	false	Mark as required for form validation
reverse	boolean	false	Place switch on the right side
trackClass	string | string[] | object	—	Custom class(es) for the track
thumbClass	string | string[] | object	—	Custom class(es) for the thumb

Events

Event	Type	Description
update:modelValue	(v)	Value changed
change	(v)	Value changed

Slots

Slot	Description
default	Custom label content
description	Custom description