토글 스위치

<div class="krds-form-toggle-switch">
	<input type="checkbox" id="switch">
	<label for="switch"><span class="switch-toggle"><i></i></span>switch : default</label>
</div>
<div class="krds-form-toggle-switch">
	<input type="checkbox" id="switch_checked" checked>
	<label for="switch_checked"><span class="switch-toggle"><i></i></span>switch : checked</label>
</div>
<div class="krds-form-toggle-switch">
	<input type="checkbox" id="switch_disabled_1" disabled>
	<label for="switch_disabled_1"><span class="switch-toggle"><i></i></span>switch : disabled</label>
</div>

<template>
  <div class="krds-form-toggle-switch">
	<input type="checkbox" id="switch">
	<label for="switch"><span class="switch-toggle"><i></i></span>switch : default</label>
</div>
<div class="krds-form-toggle-switch">
	<input type="checkbox" id="switch_checked" checked>
	<label for="switch_checked"><span class="switch-toggle"><i></i></span>switch : checked</label>
</div>
<div class="krds-form-toggle-switch">
	<input type="checkbox" id="switch_disabled_1" disabled>
	<label for="switch_disabled_1"><span class="switch-toggle"><i></i></span>switch : disabled</label>
</div>
</template>

<script setup lang="ts">
// 토글 스위치 컴포넌트
// 온/오프 토글 스위치입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>