체크박스 Checkbox

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

KRDS 가이드

기본

import { Checkbox, CheckboxGroup } from '@krds.ui/react'

export default function CheckboxDemo() {
  return (
    // 레이블은 id와 label로 준다 (children만 쓰면 레이블이 연결되지 않고 이름이 '레이블'로 고정됨, README 알려진 문제)
    <CheckboxGroup>
      <Checkbox id="agree-privacy" name="agree" value="privacy" label="개인정보 수집·이용 동의" />
      <Checkbox id="agree-sms" name="agree" value="sms" label="문자 알림 동의" />
    </CheckboxGroup>
  )
}

체크박스 칩

import { CheckboxChip } from '@krds.ui/react'

export default function CheckboxChipDemo() {
  return (
    // id를 줘야 레이블이 연결된다 (README 알려진 문제)
    <CheckboxChip id="chip-all" name="chip">
      전체
    </CheckboxChip>
  )
}

Checkbox

Props

이름	타입	기본값	설명
size	CheckboxSize	medium	체크박스 크기
description	string	-	추가 설명 텍스트
defaultValue	boolean	-	비제어 상태에서 사용할 초기 체크 상태
label	string	-	레이블 텍스트 (children이 없을 경우 사용)

CheckboxGroup

Props

이름	타입	기본값	설명
children (필수)	ReactNode	-	그룹 내 체크박스들
column	boolean	false	세로 배치 여부
className	string	-	추가 CSS 클래스

CheckboxChip

Props

이름	타입	기본값	설명
size	CheckboxChipSize	medium	체크박스 크기
defaultValue	boolean	-	비제어 상태에서 사용할 초기 체크 상태