7onicDESIGN SYSTEM

Checkbox

Checkbox는 사용자가 옵션을 켜고 끌 수 있는 폼 컨트롤입니다. 단독으로 사용하거나 여러 개를 묶어 그룹으로 사용합니다.

3
Sizes
3
Radius
3
States
Radix
Base

Playground

미리보기
D
Size
Color
Weight
Radius
Checked
Items
Options
<Checkbox
  label="Email"
/>

Sizes

sm
박스14px
아이콘10px
폰트12px
Gap6px
클릭24px
default
박스16px
아이콘12px
폰트14px
Gap8px
클릭32px
lg
박스20px
아이콘14px
폰트16px
Gap10px
클릭36px

Features

With Field

Field 컴포넌트와 조합하면 disabled 상태를 자동으로 상속합니다.

<Field>
  <Field.Label>Notifications</Field.Label>
  <div className="flex flex-col gap-2">
    <Checkbox defaultChecked label="Email" />
    <Checkbox label="Push" />
    <Checkbox label="SMS" />
  </div>
</Field>
<Field>
  <Field.Label>Notifications</Field.Label>
  <div className="flex gap-6">
    <Checkbox defaultChecked label="Email" />
    <Checkbox label="Push" />
    <Checkbox label="SMS" />
  </div>
</Field>

States

Unchecked
Checked
Indeterminate
Disabled
Disabled On
<Checkbox />
<Checkbox defaultChecked />
<Checkbox checked="indeterminate" />
<Checkbox disabled />
<Checkbox disabled defaultChecked />

API

Props

checkedundefined
boolean | "indeterminate"

제어 모드의 체크 상태

defaultCheckedundefined
boolean

비제어 모드의 초기 체크 상태

onCheckedChangeundefined
(checked: boolean | "indeterminate") => void

상태 변경 시 콜백

size"default"
"sm" | "default" | "lg"

체크박스 크기 (14/16/20px)

radius"sm"
"none" | "sm" | "md"

모서리 둥글기 (none: 0px / sm: 2px / md: 4px)

weight"bold"
"thin" | "bold"

보더 두께 (thin: 1px / bold: 2px)

color"default"
"default" | "primary"

체크/미확정 상태의 채움 색상

labelundefined
string

체크박스 라벨 텍스트

disabledundefined
boolean

비활성 상태

requiredundefined
boolean

필수 필드

nameundefined
string

폼 name 속성

value"on"
string

폼 value 속성

Anatomy

1
2
3
4
I agree
statechecked · unchecked · indeterminate
1
Root
플렉스 컨테이너
2
Box
체크박스 본체
3
Checkmark
체크 시 표시
4
Label
옵션 텍스트

Best Practices

✓

권장

  • ✓명확한 라벨과 함께 사용
  • ✓다중 선택이 필요할 때 사용
  • ✓그룹 전체 선택에 indeterminate 사용
  • ✓필수 항목에는 Field와 조합
✕

지양

  • ✗단일 선택에 Checkbox 사용 금지 (Radio 사용)
  • ✗즉시 효과가 나는 전환에는 Switch 사용
  • ✗라벨 없이 사용하지 않기
  • ✗선택지가 너무 많으면 Select 검토

Accessibility

키보드 조작

Space체크 전환
Tab포커스 이동

ARIA 속성

  • role="checkbox" 자동 부여
  • aria-checked true/false/mixed
  • 포커스 인디케이터
  • label 으로 클릭 영역 확대