체크박스

<div class="fieldset">
	<div class="form-group">
		<div class="form-conts">
			<div class="krds-check-area">
				<div class="krds-form-check">
					<input type="checkbox" name="chk_1" id="chk_1">
					<label for="chk_1">기본</label>
				</div>
				<div class="krds-form-check">
					<input type="checkbox" name="chk_1" id="chk_2" checked>
					<label for="chk_2">선택됨</label>
				</div>
				<div class="krds-form-check">
					<input type="checkbox" name="chk_1" id="chk_3" disabled>
					<label for="chk_3">비활성화</label>
				</div>
				<div class="krds-form-check">
					<input type="checkbox" name="chk_1" id="chk_4" disabled checked>
					<label for="chk_4">선택된 비활성화</label>
				</div>
			</div>
		</div>
	</div>
	
	<div class="form-group">
		<div class="form-conts">
			<div class="krds-check-area chk-column">
				<div class="krds-form-check ">
					<input type="checkbox" id="chk_additional_1" checked>
					<label for="chk_additional_1">체크박스</label>
					<div class="krds-form-check-cnt">
						<p class="krds-form-check-p">
							부가적인 설명이 들어갑니다.
						</p>
					</div>
				</div>
				<div class="krds-form-check">
					<input type="checkbox" id="chk_additional_2">
					<label for="chk_additional_2">체크박스</label>
					<div class="krds-form-check-cnt">
						<p class="krds-form-check-p">
							부가적인 설명이 들어갑니다.
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<template>
  <div class="fieldset">
	<div class="form-group">
		<div class="form-conts">
			<div class="krds-check-area">
				<div class="krds-form-check">
					<input type="checkbox" name="chk_1" id="chk_1">
					<label for="chk_1">기본</label>
				</div>
				<div class="krds-form-check">
					<input type="checkbox" name="chk_1" id="chk_2" checked>
					<label for="chk_2">선택됨</label>
				</div>
				<div class="krds-form-check">
					<input type="checkbox" name="chk_1" id="chk_3" disabled>
					<label for="chk_3">비활성화</label>
				</div>
				<div class="krds-form-check">
					<input type="checkbox" name="chk_1" id="chk_4" disabled checked>
					<label for="chk_4">선택된 비활성화</label>
				</div>
			</div>
		</div>
	</div>
	
	<div class="form-group">
		<div class="form-conts">
			<div class="krds-check-area chk-column">
				<div class="krds-form-check ">
					<input type="checkbox" id="chk_additional_1" checked>
					<label for="chk_additional_1">체크박스</label>
					<div class="krds-form-check-cnt">
						<p class="krds-form-check-p">
							부가적인 설명이 들어갑니다.
						</p>
					</div>
				</div>
				<div class="krds-form-check">
					<input type="checkbox" id="chk_additional_2">
					<label for="chk_additional_2">체크박스</label>
					<div class="krds-form-check-cnt">
						<p class="krds-form-check-p">
							부가적인 설명이 들어갑니다.
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<script setup lang="ts">
// 체크박스 컴포넌트
// 기본 체크박스 컴포넌트입니다.

import { ref } from 'vue'

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

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