Checkbox

Mobile

가시적인 체크박스 사각형 크기는 디자인 그대로 유지하되, 터치 hit area를 ≥44pt 확보한다 (iOS HIG / Android 권장 기준).

시각적 박스가 16×16이라면 Pressable의 hitSlop 또는 invisible padding으로 hit area를 44×44 이상으로 확장
라벨이 함께 있는 form row의 경우 라벨까지 탭 영역에 포함시켜 행 전체가 터치 영역이 되도록 구성 (행 높이 ≥44pt)
체크 상태 토글 후 가벼운 haptic feedback (impactLight) 권장

States

checked · unchecked · indeterminate · disabled

Sizes

지원 사이즈: sm · md

Default: md

Size	Hitbox (web)	Hitbox (mobile)	Box	Check icon	Primary use
sm	32 × 32	44 × 44 (`hitSlop`로 확장)	16 × 16	12px	Dense list, table cell
md	40 × 40	44 × 44 (`hitSlop` 또는 행 전체 hit area)	20 × 20	14px	Default. Form

Box radius rounded-[4px] (4px). Off border 2px stone-400, On bg-brown-800 border-brown-800 text-white. Hover border brown-200. Focus ring 2px brown-200/24 (alphaBrand 24%) offset 2. Hitbox 영역으로 클릭 — 시각 박스보다 큰 터치 면적. 모바일은 두 사이즈 모두 iOS HIG 44pt 충족하도록 hit area 확장 필수. (웹·데스크톱 승인 명세: tokens/web-desktop.yaml states.checkbox radius 4 · borderWidth 2 · markStrokeWidth 2.5.)

Token Mapping

Token	Value	Description
border	`2px solid stone-400`	기본 (web·desktop)
hover border	`brown-200`	hover (light `brown-200` · dark `brown-100`)
checked border	`checkbox/on-fill`	Light brown.800 / Dark brown.100
checked bg	`checkbox/on-fill`	Light brown.800 / Dark brown.100
checked indicator	`checkbox/mark`	Light white / Dark brown.900; Check·Minus strokeWidth 2.5
focus ring	`2px brown-200/24 ring-offset-2`	alphaBrand 24%
label	`typography-cmp-md-plus text-stone-600`
disabled	`opacity-50` + `cursor-not-allowed`
radius	`rounded-[4px]` (4px)
size	20 × 20 (default) / 16 × 16 (sm)

Usage

<div className="flex items-center gap-2">
  <Checkbox
    id="agree"
    checked={agreed}
    onCheckedChange={setAgreed}
  />
  <Label htmlFor="agree">이용약관에 동의합니다</Label>
</div>

<Checkbox checked="indeterminate" />  {/* 부분 선택 상태 */}

role="checkbox" + aria-checked 자동 (mixed for indeterminate)
Label 결합 필수

Do / Don't

Do: 다중 선택 리스트, 폼 동의 체크에 사용
Don't: 단일 선택 (둘 중 하나)에는 RadioGroup 사용
Don't: 즉시 반영되는 설정에는 Switch 사용