칩 라디오
칩 스타일의 라디오 버튼입니다.
#radio #chip
HTML
<div class="krds-check-area">
<div class="krds-form-chip">
<input type="radio" class="radio" name="rdo_chip" id="rdo_chip_1">
<label class="krds-form-chip-outline" for="rdo_chip_1">chip 상태 : default </label>
</div>
<div class="krds-form-chip">
<input type="radio" class="radio" name="rdo_chip" id="rdo_chip_2" checked>
<label class="krds-form-chip-outline" for="rdo_chip_2">chip 상태 : checked </label>
</div>
<div class="krds-form-chip">
<input type="radio" class="radio" name="rdo_chip" id="rdo_chip_3" disabled>
<label class="krds-form-chip-outline" for="rdo_chip_3">chip 상태 :disabled </label>
</div>
</div>Vue 컴포넌트
<template>
<div class="krds-check-area">
<div class="krds-form-chip">
<input type="radio" class="radio" name="rdo_chip" id="rdo_chip_1">
<label class="krds-form-chip-outline" for="rdo_chip_1">chip 상태 : default </label>
</div>
<div class="krds-form-chip">
<input type="radio" class="radio" name="rdo_chip" id="rdo_chip_2" checked>
<label class="krds-form-chip-outline" for="rdo_chip_2">chip 상태 : checked </label>
</div>
<div class="krds-form-chip">
<input type="radio" class="radio" name="rdo_chip" id="rdo_chip_3" disabled>
<label class="krds-form-chip-outline" for="rdo_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>컴포넌트 정보
- 파일명
- radio_chip.html
- 카테고리
- 폼
- 난이도
- 쉬움