Animated Toggle Switch
A fully interactive toggle switch component built with Vue ref and Tailwind utility classes for transitions.
Get Code
Status: Off
<script setup>
import { ref } from 'vue'
const enabled = ref(false)
</script>
<template>
<button
@click="enabled = !enabled"
:class="enabled ? 'bg-green-500' : 'bg-gray-200'"
class="relative h-8 w-14 rounded-full transition-colors duration-200"
>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-0'"
class="block h-7 w-7 bg-white rounded-full shadow transition-transform duration-200"
/>
</button>
</template>