Checkbox

한눈에#

비제어가 기본입니다 — defaultChecked만으로 동작하고, 제어가 필요하면 checked + onChange를 함께 넘깁니다.

전체 선택이메일 알림 수신SMS 알림 수신

• 네이티브 input 기반
• indeterminate(혼합)
• 2 크기(md·sm)
• 라벨 자동 연동

박스는 장식 — 상태의 진실은 시각적으로 숨긴 네이티브 input입니다(키보드·SR 경로 보존)

사용 시점#

제출 전까지 보류되는 다중 선택이면 Checkbox — 즉시 적용/단일 선택은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

Checkbox를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

해부#

박스·체크·라벨 위에 토큰 실측을 핀으로 얹습니다 — 박스는 장식, 진실은 숨긴 네이티브 input입니다.

18

box

18px

check/dash

14px

gap

8pxspace-2

radius

6pxcheckbox.radius

border

1pxcheckbox.border

label

14pxbody-2

hit area

+6px (::after)

변형 — indeterminate#

전체 선택 헤더처럼 “일부만 선택”인 혼합 상태입니다. HTML 속성이 없는 DOM 전용 프로퍼티라 컴포넌트가 ref로 el.indeterminate를 동기하고, 박스에는 체크 대신 대시를 그립니다.

전체 선택항목 A항목 B

크기#

size로 2단(ADR-012 B-P2) — md(기본) 18px 박스, sm 16px 박스. 라벨은 body-2로 공통이며, 시각 크기와 무관하게 박스의 히트 영역이 control.height-md(44px) 터치 타깃으로 역산 확장됩니다(레이아웃을 밀어내지 않는 ::after, Switch·RadioGroup과 동형). 라벨은 label 래핑으로 함께 클릭되어 히트 폭을 더 넓힙니다.

mdsm

sizeboxcheck/dashlabelhit areamd18px14px14px (body-2)+6pxsm16px12px14px (body-2)+6px

상태#

기본선택됨비활성선택된 비활성

• Focus — 박스에 2px primary 아웃라인 (Tab으로 확인하세요)
• Checked / Indeterminate — checkbox.bg-checked 채움 + 체크/대시 표시
• Disabled — 커서 차단 + 60% 투명도

Props#

className은 루트 label에 적용됩니다.

접근성#

• 네이티브 <input type="checkbox">를 시각적으로만 숨겨 키보드(Space)· 스크린리더 경로를 그대로 유지합니다
• children 라벨은 <label>로 감싸 클릭 영역과 접근성 이름이 자동 연동됩니다 — 라벨 없이 쓰면 aria-label을 부여하세요
• indeterminate는 접근성 트리에 mixed 상태로 보고됩니다
• 커스텀 박스·체크는 장식(aria-hidden) — 상태의 진실은 네이티브 input

토큰#