체크박스
여러 항목을 켜고 끄며 고르는 가장 기본적인 선택 컨트롤이다. 네이티브 체크박스에 시맨틱 틴트(tone, 기본 primary)만 입혀 브라우저·접근성 동작을 그대로 살린다. 전체 선택 헤더에서 일부만 골랐을 때는 indeterminate(대시)로 부분 선택을 드러낸다. 폼·선택 상태 로직은 호출자 몫이라 표 행 선택부터 약관 동의까지 그대로 끼워 쓴다.
상태
기본
선택됨
부분 선택
비활성
비활성·선택
틴트는 tone(기본 primary). 부분 선택은 indeterminate 로: 체크 대신 대시가 표시된다.
활용 방법
전체 선택 + 행 선택 (indeterminate)
일부만 고르면 헤더가 indeterminate(대시)가 되고, 전체를 고르면 체크된다. 목록 화면 일괄 편집에서 흔히 쓰는 패턴이다.
Preview
tsx
const all = sel.size === rows.length;const some = sel.size > 0 && !all;<Checkboxchecked={all}indeterminate={some}onChange={toggleAll}aria-label="전체 선택"/>
색상 (tone)
tone 으로 체크 틴트를 시맨틱 토큰에서 고른다. 기본은 primary, 강조엔 point, 위험엔 danger 식으로.
Preview
tsx
<Checkbox tone="primary" defaultChecked /><Checkbox tone="point" defaultChecked /><Checkbox tone="danger" defaultChecked />
라벨
label 을 주면 <label> 로 감싸 텍스트까지 클릭 영역이 된다. 약관 동의·옵션 토글에 적합하다.
Preview
tsx
<Checkbox label="이메일 수신 동의" defaultChecked /><Checkbox label="SMS 수신 동의" />
비활성
disabled 면 박스는 흐려지고 라벨은 subtle 로, 커서도 막힌다.
Preview
tsx
<Checkbox label="잠긴 옵션" disabled defaultChecked />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| tone | "primary" | "point" | "danger" | "success" | "warning" | "primary" | 체크 틴트(accent-color): 시맨틱 토큰에서 주입 |
| checked | boolean | - | 선택 상태(controlled). onChange 와 함께 |
| onChange | (e) => void | - | 토글 핸들러 |
| indeterminate | boolean | false | 부분 선택 표시(체크 대신 대시): 전체 선택 헤더용 |
| label | ReactNode | - | 옆 라벨: 주면 텍스트까지 클릭 영역 |
| disabled | boolean | false | 흐리게 + 클릭 차단 |
| className | string | "" | label 있으면 래퍼, 없으면 박스에 적용 |
| ...props | InputHTMLAttributes | - | 네이티브 input 속성 전부 전달(name·value·defaultChecked·aria-label ...) |