opnform/resources/js/components/forms/components/VSwitch.vue

<template>
  <div role="button" @click="onClick">
    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': modelValue}">
      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': modelValue}" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const { modelValue, disabled } = defineProps({
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false }
})
const emit = defineEmits(['update:modelValue'])

const onClick = () => {
  if (disabled) return
  emit('update:modelValue', !modelValue)
}
</script>