라디오 버튼

<div class="fieldset">
	<div class="form-group">
		<div class="form-conts">
			<div class="krds-check-area">
				<div class="krds-form-check">
					<input type="radio" name="rdo_1" id="rdo_1">
					<label for="rdo_1">기본</label>
				</div>
				<div class="krds-form-check">
					<input type="radio" name="rdo_1" id="rdo_2" checked>
					<label for="rdo_2">선택됨</label>
				</div>
				<div class="krds-form-check">
					<input type="radio" name="rdo_1" id="rdo_3" disabled>
					<label for="rdo_3">비활성화</label>
				</div>
				<div class="krds-form-check">
					<input type="radio" name="rdo_1a" id="rdo_4" disabled checked>
					<label for="rdo_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="radio" name="rdo_1" id="rdo_1-1" checked>
					<label for="rdo_1-1">라디오버튼</label>
					<div class="krds-form-check-cnt">
						<p class="krds-form-check-p">
							부가적인 설명이 들어갑니다.
						</p>
					</div>
				</div>
				<div class="krds-form-check">
					<input type="radio" name="rdo_1" id="rdo_1-2">
					<label for="rdo_1-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="radio" name="rdo_1" id="rdo_1">
					<label for="rdo_1">기본</label>
				</div>
				<div class="krds-form-check">
					<input type="radio" name="rdo_1" id="rdo_2" checked>
					<label for="rdo_2">선택됨</label>
				</div>
				<div class="krds-form-check">
					<input type="radio" name="rdo_1" id="rdo_3" disabled>
					<label for="rdo_3">비활성화</label>
				</div>
				<div class="krds-form-check">
					<input type="radio" name="rdo_1a" id="rdo_4" disabled checked>
					<label for="rdo_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="radio" name="rdo_1" id="rdo_1-1" checked>
					<label for="rdo_1-1">라디오버튼</label>
					<div class="krds-form-check-cnt">
						<p class="krds-form-check-p">
							부가적인 설명이 들어갑니다.
						</p>
					</div>
				</div>
				<div class="krds-form-check">
					<input type="radio" name="rdo_1" id="rdo_1-2">
					<label for="rdo_1-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>