체크박스는 복수의 옵션 중에서 1개 이상의 옵션을 선택할 때 사용하는 구성요소입니다.
Usage
체크박스는 사용자의 입력을 수집하는데 사용합니다. 사용자는 여러 옵션 중에서 하나 이상의 옵션을 선택할 수 있습니다.
•
연관 아이템 목록 중에서 하나 이상의 옵션을 선택해야 할 때 사용합니다.
•
단일 아이템의 true/false 선택이 필요할 때 사용합니다.
•
전체 선택 등의 액션을 필요에 따라 함께 사용할 수 있습니다.
Anatomy
1.
Checkbox
클릭을 통해 선택/해제 액션을 합니다.
2.
Checkbox label
체크박스와 연관된 텍스트 레이블입니다.
3.
Select all
필요에 따라 전체 선택/해제 액션을 추가하여 사용할 수 있습니다.
Appearance
각 상태에 따라 스타일을 적용합니다.
디자인 의도에 따라 버튼 그룹 형태로 사용할 수 있습니다.
Guidelines
•
체크박스 레이블은 반드시 함께 표시해야 합니다.
•
체크박스 레이블은 아이템에 대한 설명을 해줄 수 있는 내용으로 최대한 짧게 작성합니다.
•
자세한 설명을 제공하려면 부제목, 툴팁 등의 추가 정보 요소를 사용합니다.
•
체크박스 레이블이 영어일 경우에는 첫 글자를 대문자로 사용합니다.
•
체크박스 레이블 뒤에는 마침표를 사용하지 않습니다.
•
true/false를 선택하는 단일 아이템으로 사용할 경우에는 긍정적인 프레임으로 사용합니다.
(예 : 알림 끄기 → 알림 켜기)
•
체크박스 그룹 사용 시, 각 옵션의 순서는 논리적 순서에 따릅니다.
(예: 가나다/알파벳 순, 숫자 오름차순)
•
화면에 즉각적으로 변경점을 표시해야 하는 경우에는 체크박스 대신 토글을 사용합니다.
Accessibility
•
체크박스가 필수 선택 항목인 경우에는 필수 항목임을 알리는 표시기, 문구 등을 제공해야 합니다.
•
오류 상태인 경우에는 인라인 오류 메시지를 제공하여 스크린 리더가 읽을 수 있도록 제공합니다.
