Checkboxes
Checkbox는 사용자가 하나 이상의 항목을 선택하거나 옵션을 켜고 끌 수 있는 컨트롤입니다. Radio는 여러 옵션 중 하나만 선택할 수 있는 컨트롤입니다.
Figma 컴포넌트: Base components/Checkboxes
Type: Checkbox
Checkbox Only
With Label (sm)
With Label (md)
Type: Radio
Radio Only
With Label (sm)
With Label (md)
Size
sm (16px), md (20px) 두 가지 사이즈를 지원합니다.
Indeterminate
Checkbox는 indeterminate 상태를 지원합니다. 하위 항목 중 일부만 선택된 경우에 사용합니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'checkbox' | 'radio' | 'checkbox' | Checkbox 또는 Radio 타입 |
size | 'sm' | 'md' | 'sm' | 크기 (sm: 16px, md: 20px) |
checked | boolean | false | 선택 상태 |
indeterminate | boolean | false | 부분 선택 상태 (Checkbox 타입만) |
state | 'default' | 'hover' | 'focus' | 'disabled' | 'default' | 상태 (문서 시각화용) |
label | string | - | 레이블 텍스트 |
description | string | - | 부가 설명 텍스트 |
Figma Variants
| Property | Values |
|---|---|
| Checked | True False |
| Indeterminate | True False |
| Size | sm md |
| Type | Checkbox Radio |
| Text | True False |
| State | Default Hover Focused Disabled |