switch template

Switch.vue

<script lang="ts" setup>
export interface Props {
  disabled?: boolean
  checked: boolean
}

defineProps<Props>()
const emit = defineEmits(['update:checked'])

const onInput = (event: Event) => {
  emit('update:checked', (event?.target as HTMLInputElement).checked)
}
</script>

<template>
  <label class="switch">
    <slot />

    <input
      :disabled="disabled"
      :checked="checked"
      type="checkbox"
      role="switch"
      class="input"
      @input="onInput"
    />
  </label>
</template>
<style scoped src="./Switch.scss" />