03 · Components · 선택
체크박스Checkbox
여러 개를 동시에 선택하거나 단일 예/아니오 값을 수집. 라디오는 "하나만", 체크박스는 "여러 개 가능"이라는 규칙을 지키세요.
StableWCAG AA
기본
tsx
<Checkbox id="c1" label="전체 동의" />
<Checkbox id="c2" label="이메일 수신" description="새 릴리즈 소식만 전송됩니다." />
<Checkbox id="c3" label="비활성" disabled />미리보기
부분 선택 (indeterminate)
자식 항목의 일부만 선택된 상태를 상위 체크박스로 표현할 때 사용합니다.
tsx
<Checkbox label="모든 파일 선택" indeterminate checked />미리보기
레이블은 반드시 <label>과 연결되어야 합니다. 주님의교회 PCL Checkbox는 전체를 label로 감싸 클릭 영역을 넓힙니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | 레이블 텍스트 또는 노드. | |
description | ReactNode | 레이블 아래 보조 설명. | |
indeterminate | boolean | 부분 선택 상태 표시. | |
checked / defaultChecked | boolean | 제어 / 비제어 값. | |
disabled | boolean | 비활성. |