Checkbox

Mobile

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

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

Preview

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-md (6px). Off border stone-200, On bg-brown-800 border-brown-800 text-white. Hitbox 영역으로 클릭 — 시각 박스보다 큰 터치 면적. 모바일은 두 사이즈 모두 iOS HIG 44pt 충족하도록 hit area 확장 필수.

Token Mapping

Token	Value	Description
border	`1px solid stone-200`	기본
checked border	`brown-800`	체크 상태
checked bg	`brown-800`	체크 상태
checked indicator	`white`	Lucide `Check`, strokeWidth 2.25
label	`label1Medium text-stone-600`
disabled	`stone-100` border, `stone-50` bg, `stone-300` text
size	20 × 20 (default) / 16 × 16 (sm)
radius	`rounded-md` (6px)

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 사용

Checkbox

On this page