컴포넌트 · 입력

Checkbox · Radio · Switch

선택 컨트롤 3종입니다. 여러 개를 고를 땐 Checkbox, 하나만 고를 땐 Radio, 즉시 적용되는 켜기/끄기에는 Switch를 씁니다.

무엇을 쓸까

컨트롤선택 수적용 시점예시
Checkbox0개 이상제출 시약관 동의 · 테이블 행 선택 · 필터
Radio정확히 1개제출 시결제 수단 · 정산 주기
SwitchOn / Off즉시알림 받기 · 매장 영업 중 · 품절 표시

Checkbox

약관 동의 패턴

‘전체 동의’는 하위 항목 상태에 따라 indeterminate가 됩니다.

Radio

Switch

사용 규칙

이렇게 하세요

  • 라벨 영역 전체를 클릭 가능하게
  • Switch는 결과가 즉시 반영될 때만
  • Radio 그룹에는 기본 선택값 제공

이렇게 하지 마세요

  • Switch를 ‘저장’ 버튼과 함께 쓰기
  • 단일 Checkbox로 두 가지 상반된 선택 표현
  • 라벨 없이 컨트롤만 두기

Props

PropTypeDefault설명
Checkbox.checkedboolean | "indeterminate"—제어 상태
RadioGroup.options{ value; label; description?; disabled?; trailing? }[]—옵션
RadioGroup.variant"default" | "card""default"card는 선택 영역 전체가 카드
Switch.size"sm" | "md" | "lg""md"20 · 24 · 32px 높이
label · descriptionstring—공통 라벨 · 설명