Toggle

Animated on/off switch for binary settings that take effect immediately.

ExamplesCodeUsageChangelog

Examples

Basic

Enable notifications

Tailwind v4

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

<template>
  <Toggle v-model="enabled" label="Enable notifications" />
</template>

On by default

Auto-save shifts

Tailwind v4

<Toggle :model-value="true" label="Auto-save shifts" />

Disabled states

Off (disabled)On (disabled)

Tailwind v4

<Toggle :model-value="false" disabled label="Off (disabled)" />
<Toggle :model-value="true" disabled label="On (disabled)" />

Without label

Tailwind v4

<Toggle v-model="silent" />

Props

Prop	Type	Default	Description
modelValue	boolean	—	Whether the toggle is on
label	string	—	Text label rendered to the right of the track
disabled	boolean	false	Prevents interaction and dims the control

Emits

Event	Payload	Description
update:modelValue	boolean	New state after click