KRDS Vue

체크박스 Checkbox ​

체크박스는 사용자가 여러 개의 옵션 중 한 개 이상의 값을 선택할 수 있도록 하는 경우에 사용한다. 즉, 체크박스 옵션의 선택은 상호배타적이므로 한 개의 옵션을 선택하는 것은 다른 옵션의 선택에 영향을 미치지 않는다.

KRDS 가이드

기본 ​

v-model로 선택 상태(boolean)를 연결합니다. description 슬롯으로 부가 설명을 넣을 수 있고, KrdsCheckArea의 column으로 세로로 배치합니다.

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

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

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

  const basic = ref(false)
  const selected = ref(true)
  const disabled = ref(false)
  const disabledSelected = ref(true)
  const description1 = ref(false)
  const description2 = ref(false)
</script>

<template>
  <div>
    <div style="margin-bottom: 2rem">
      <KrdsCheckArea>
        <KrdsCheckbox v-model="basic">기본</KrdsCheckbox>
        <KrdsCheckbox v-model="selected">선택됨</KrdsCheckbox>
        <KrdsCheckbox v-model="disabled" disabled>비활성화</KrdsCheckbox>
        <KrdsCheckbox v-model="disabledSelected" disabled>선택된 비활성화</KrdsCheckbox>
      </KrdsCheckArea>
    </div>

    <div>
      <KrdsCheckArea column>
        <KrdsCheckbox v-model="description1">
          체크박스
          <template #description>부가적인 설명이 들어갑니다.</template>
        </KrdsCheckbox>
        <KrdsCheckbox v-model="description2">
          체크박스
          <template #description>부가적인 설명이 들어갑니다.</template>
        </KrdsCheckbox>
      </KrdsCheckArea>
    </div>
  </div>
</template>

사이즈 ​

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

  const mediumChecked = ref(false)
  const largeChecked = ref(false)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 1.5rem">
    <KrdsCheckArea>
      <KrdsCheckbox v-model="mediumChecked" size="medium">Medium 크기 체크박스</KrdsCheckbox>
    </KrdsCheckArea>

    <KrdsCheckArea>
      <KrdsCheckbox v-model="largeChecked" size="large">Large 크기 체크박스</KrdsCheckbox>
    </KrdsCheckArea>
  </div>
</template>

Chip ​

chip을 지정하면 칩 모양으로 표시됩니다. 칩 스타일에서는 description 슬롯이 표시되지 않습니다.

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

  const checked1 = ref(false)
  const checked2 = ref(true)
  const checked3 = ref(false)
</script>

<template>
  <KrdsCheckArea>
    <KrdsCheckbox v-model="checked1" chip>Chip 체크박스 1</KrdsCheckbox>
    <KrdsCheckbox v-model="checked2" chip>Chip 체크박스 2 (선택됨)</KrdsCheckbox>
    <KrdsCheckbox v-model="checked3" chip disabled>Chip 체크박스 3</KrdsCheckbox>
  </KrdsCheckArea>
</template>

KrdsCheckbox ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
idstring-HTML ID
disabledbooleanfalse비활성화 여부
size"medium" | "large"'medium'크기
modelValuebooleanfalse모델 값
chipbooleanfalseChip 스타일 여부

Events

이름인자설명
update:modelValue[value: boolean]체크 상태가 바뀔 때 (v-model)

Slots

이름설명
default
description

KrdsCheckArea ​

Props

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

Slots

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