Checkbox
Checkbox (체크박스)
체크박스는 그룹에서 여러 옵션을 선택하거나 단일 옵션을 켜고 끄는 데 사용하는 컴포넌트예요. 하나의 옵션만 고르도록 제한해야 한다면 라디오 그룹이나 드롭다운을 고려해 보세요.
출처: 문서
본문
체크박스는 그룹에서 여러 옵션을 선택하거나 단일 옵션을 켜고 끄는 데 사용해요. 사람을 하나의 옵션만 고르도록 제한해야 한다면 라디오 그룹(radio group)이나 드롭다운을 시도해 보세요.
체크박스는 즉각적인 변경을 일으키지 않아요. 버튼을 선택하는 것 같은 제출 단계(submission step)가 필요하죠. 즉각적인 효과가 있는 컴포넌트가 필요하다면 스위치(switch)를 시도해 보세요.
Behavior (동작)
불확정(indeterminate) 상태
하나의 체크박스가 옵션의 하위 집합을 제어할 수 있다면, 부모 체크박스를 선택하거나 해제하면 모든 자식 체크박스도 선택되거나 해제돼요. 옵션 일부만(전부는 아닌) 선택되었을 때는 불확정(indeterminate) 상태를 사용해서 보여주세요.
부모와 자식 체크박스 사이에 시각적 구분을 만들어 한눈에 훑어보기(scannability)를 높이세요. 예를 들어 자식들을 들여쓰기(indent)하면, 누군가 부모를 선택하면 무슨 일이 일어날지 쉽게 짐작할 수 있어요.
Layout (레이아웃)
단일(Single)
예/아니오 선택이 필요할 때는 단일 체크박스를 사용해요.
그룹(Group)
여러 옵션을 선택할 수 있을 때는 체크박스 그룹을 사용해요. 체크박스 그룹은 일곱 개 옵션으로 제한하는 것이 좋아요. 일곱 개를 넘으면, 훑어보기 쉬운 별도의 그룹으로 나누거나 콤보박스(combobox)나 드롭다운에 넣는 것을 고려하세요.
Accessibility (접근성)
체크박스 그룹은 설명적인 라벨 컴포넌트와 연결되어야 해요. 내장된 라벨 기능을 위해 checkbox 필드 컴포넌트를 사용하세요. 체크박스 안에서 label prop을 전달하면 단일 체크박스에 텍스트 라벨을 제공해요.
Content (콘텐츠)
- 그룹 라벨(선택) : 체크박스 그룹을 묘사해요.
- 체크박스 라벨(필수) : 체크박스를 선택하면 어떤 일이 일어나는지 명확하게 전달해요.
짧고 명확하게 유지하기
체크박스 라벨은 간결하고 한눈에 훑을 수 있어야 해요. 완전한 문장 대신 문장 조각을 사용하고, 꼭 필요하지 않다면 여러 문장을 피하세요.
부정적인 진술을 만드는 라벨은 혼란을 줄 수 있으니 피하세요. 체크됨(checked)이 '예'를 의미한다는 것이 명확한 표현을 쓰세요.
첫 단어를 대문자로, 마침표는 생략
문장식 대문자 규칙(sentence-style capitalization)을 사용해서 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization 항목을 참고하세요. 체크박스 라벨이 여러 문장을 요구하지 않는 한 문장 부호를 쓰지 마세요.
언제 인칭(1인칭)을 쓸까
동작에 대한 사람의 통제를 보여주거나, 한 사람의 콘텐츠를 다른 사람의 콘텐츠와 구분할 때 1인칭 대명사(I, me, my)를 쓰는 것은 흔하지만 필수는 아니에요. 자세한 내용은 Microsoft Writing Style Guide의 Person 항목을 참고하세요.
훑어보기 좋게 옵션 그룹화하기
체크박스 그룹을 묘사하려면 라벨 컴포넌트를 사용하세요. 선택 요구 사항이 있다면 라벨에 포함시키세요.
체크박스 그룹의 옵션은 일관된 구조를 따라야 해요. 예를 들어 옵션을 전부 명사로 하거나 전부 동사로 하는 식이죠. 구조를 섞으면 목록을 훑어보기 어려워져요. 각 옵션에서 단어를 반복하지 않도록 노력하세요. 대신 반복되는 단어를 그룹 라벨에 포함해서 옵션을 간결하게 유지하세요.
논리적 순서
옵션을 가장 작은 것에서 큰 것, 가장 단순한 것에서 복잡한 것으로 나열하세요. 안전과 보안이 고려 사항이라면, 데이터 손실이나 시스템 접근이 없도록 가장 안전한 것부터 가장 위험한 것 순으로 나열하세요.
옵션을 알파벳 순으로 나열한다면, 텍스트가 지역화되면 순서가 바뀔 수 있다는 점을 기억하세요.