KRDS Vue

라디오 버튼 Radio button ​

라디오 버튼은 사용자가 여러 개의 옵션 중 하나만 선택할 수 있도록 하는 경우에 사용한다. 즉, 라디오 버튼 옵션의 선택은 상호배타적이므로 한 개의 옵션을 선택하면 다른 옵션은 자동으로 선택 해제된다.

KRDS 가이드

기본 ​

같은 그룹의 라디오는 같은 name과 v-model을 쓰고, modelValue가 value와 같은 라디오가 선택됩니다. description 슬롯으로 부가 설명을 넣을 수 있고, KrdsCheckArea의 column으로 세로로 배치합니다.

부가적인 설명이 들어갑니다.

부가적인 설명이 들어갑니다.

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsCheckArea, KrdsRadio } from '@krds.ui/vue'

  const selectedValue = ref('option2')
  const selectedValue2 = ref('option4')
  const selectedWithDescription = ref('option1')
</script>

<template>
  <div>
    <div style="margin-bottom: 2rem">
      <KrdsCheckArea>
        <KrdsRadio v-model="selectedValue" value="option1" name="basic">기본</KrdsRadio>
        <KrdsRadio v-model="selectedValue" value="option2" name="basic">선택됨</KrdsRadio>
        <KrdsRadio v-model="selectedValue" value="option3" name="basic" disabled>비활성화</KrdsRadio>
        <KrdsRadio v-model="selectedValue2" value="option4" name="basic2" disabled>선택된 비활성화</KrdsRadio>
      </KrdsCheckArea>
    </div>

    <div>
      <KrdsCheckArea column>
        <KrdsRadio v-model="selectedWithDescription" value="option1" name="withDesc">
          라디오버튼
          <template #description>부가적인 설명이 들어갑니다.</template>
        </KrdsRadio>
        <KrdsRadio v-model="selectedWithDescription" value="option2" name="withDesc">
          라디오버튼
          <template #description>부가적인 설명이 들어갑니다.</template>
        </KrdsRadio>
      </KrdsCheckArea>
    </div>
  </div>
</template>

KrdsRadio ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
namestring-폼 필드 이름
idstring-HTML ID
disabledbooleanfalse비활성화 여부
size"medium" | "large"'medium'크기
modelValuestring | number | boolean-모델 값
chipbooleanfalseChip 스타일 여부
value (필수)string | number | boolean-라디오 값

Events

이름인자설명
update:modelValue[value: string | number | boolean]이 항목을 선택할 때 (항목 value, v-model)

Slots

이름설명
default
description

KrdsCheckArea ​

Props

이름타입기본값설명
classKrdsClassValue-추가 클래스
columnbooleanfalse세로(컬럼) 배치 여부

Slots

이름설명
default체크박스·라디오 버튼 묶음