칩 체크박스

<div class="krds-check-area">
	<div class="krds-form-chip">
		<input type="checkbox" class="checkbox" id="chk_chip_1">
		<label class="krds-form-chip-outline" for="chk_chip_1">chip 상태 : default</label>
	</div>
	<div class="krds-form-chip">
		<input type="checkbox" class="checkbox" id="chk_chip_2" checked>
		<label class="krds-form-chip-outline" for="chk_chip_2">chip 상태 : checked</label>
	</div>
	<div class="krds-form-chip">
		<input type="checkbox" class="checkbox" id="chk_chip_3" disabled>
		<label class="krds-form-chip-outline" for="chk_chip_3">chip 상태 : disabled</label>
	</div>
</div>

<template>
  <div class="krds-check-area">
	<div class="krds-form-chip">
		<input type="checkbox" class="checkbox" id="chk_chip_1">
		<label class="krds-form-chip-outline" for="chk_chip_1">chip 상태 : default</label>
	</div>
	<div class="krds-form-chip">
		<input type="checkbox" class="checkbox" id="chk_chip_2" checked>
		<label class="krds-form-chip-outline" for="chk_chip_2">chip 상태 : checked</label>
	</div>
	<div class="krds-form-chip">
		<input type="checkbox" class="checkbox" id="chk_chip_3" disabled>
		<label class="krds-form-chip-outline" for="chk_chip_3">chip 상태 : disabled</label>
	</div>
</div>
</template>

<script setup lang="ts">
// 칩 체크박스 컴포넌트
// 칩 스타일의 체크박스입니다.

import { ref } from 'vue'

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

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