Checkbox
Primitive최소 1가지 이상의 옵션을 선택 또는 해제할 수 있는 컨트롤입니다.
구조도
- Root : 체크박스 컴포넌트를 감싸는 컨테이너 영역
- Control : 체크박스의 상태를 나타내는 시각 요소
- Label : 체크박스에 대한 정보를 전달하는 라벨
- Icon: 체크박스의 상태를 표현하는 아이콘
컴포넌트 미리보기
옵션
Label
Checkbox는 항상 Label을 가져야 합니다. Label이 설정되지 않은 체크박스는 다른 컴포넌트와의 관계가 매우 명확하고, 사용자에게 충분한 맥락을 전달할 수 있을때만 사용합니다.
Selection
Checkbox는 selected, unselected, indeterminate 중 하나의 상태를 가질 수 있습니다. Indeterminate 상태는 하위 체크박스들을 포함하고 있을 때, 하위 체크박스들의 isSelected 상태가 일관되지 않은 경우 사용합니다.
Size
Checkbox는 small, medium, large 3개의 사이즈를 가질 수 있습니다. medium이 가장 보편적으로 사용되며, 다른 사이즈는 페이지 내의 중요도를 나눠서 표현해야 할 때만 제한적으로 사용합니다.
Disabled
Disabled 상태는 체크박스가 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을 사용자에게 알려줍니다.
옵션 테이블
| 속성 | 값 | 기본값 | 설명 |
| label | text, none | - | |
| size | small, medium, large | medium | |
| shape | square, circle, ghost | square | |
| bold | true, false | false | |
| is selected | true, false | false | Checkbox가 선택되었을 시 True로 전환 |
| is disabled | true, false | false | True일 경우, Checkbox가 유저와 상호작용하지 않음 |
| is readonly | true, false | false | True일 경우, is selected를 변경할 수 없음 |
| is indeterminate | true, false | false | True일 경우, is selected를 결정할 수 없음을 나타냄 |
| is required | true, false | false | True일 경우, is selected = true가 필수임을 나타냄 |
| is invalid | true, false | false | True일 경우, is selected가 유효하지 않은 값임을 나타냄 |
상호작용
터치 / 마우스
마우스 클릭 또는 터치로 checkbox를 토글할 수 있습니다.
키보드
Focus
Tab 키를 통해 Checkbox로 Focus를 옮길 수 있습니다.
Selected ON/OFF
Focus된 상태에서 Space 키를 통해 ON / OFF를 전환할 수 있습니다.
Disabled
포커스 이동시 Disabled 상태인 Checkbox는 인식하지 않습니다.
Overflow
Label이 2줄을 초과할 경우 개행 처리하며, Control은 Label 첫 번째 줄에 세로 중앙 정렬합니다.
가이드라인
Checkbox vs Radio Group
Checkbox와 Radio Group은 서로 다른 상호작용을 가지고 있습니다. Checkbox는 여러 개의 선택지 중 여러 개를 선택할 수 있고, Radio Group은 여러 개의 선택지 중 하나만 선택할 수 있습니다.
Checkbox vs Switch
Checkbox는 선택을 표현할 때 (예를 들어, 리스트에서 선택된 아이템을 표현할 때) 사용하고, Switch는 활성화/비활성화를 표현할 때 (예를 들어, 알림을 켜고 끌 때) 사용합니다. Checkbox는 Switch와 다르게 error 상태를 가질 수 있습니다.
Indeterminate 상태
Checkbox가 동일하지 않은 여러 값을 나타내는 경우 Checkbox는 Indeterminate 상태로 나타나야 합니다. 이 상태에서 Checkbox를 토글하는 행위는 모든 하위 값들을 selected로 전환해야 합니다.