Checkbox Usage
리스트의 항목을 다중 선택하거나 개별 항목을 활성화 시킬 수 있습니다.
Layout
Orientation
Checkbox group을 가로 또는 세로 방향으로 배치하여 사용할 수 있습니다. 텍스트 길이가 길거나 선택지가 많은 리스트에서는 세로 방향의 배치가 권장됩니다. 반응형 디자인 시, 모바일 환경에서는 horizontal 리스트가 vertical로 변환되어야 합니다.
Vertical
- 선택지의 텍스트 길이가 길거나, 세 개 이상의 많은 선택지가 주어질 때 적합합니다.
- 가독성 및 접근성이 뛰어나며 텍스트를 위한 더 많은 공간을 제공합니다.
- 사용자가 선택 항목을 쉽게 스캔 및 비교할 수 있어 form 또는 긴 목록에 적합합니다.
- 트리 구조의 체크박스 구성 시 사용합니다.
Horizontal
- 두 개에서 세 개의 옵션이 있을 때 컴팩트한 배열에 적합합니다.
- 세로 공간 절약이 필요한 경우 유용하며, 툴바나 설정에서 잘 사용됩니다.
- 제한된 공간에서 시각적 균형을 맞추는 데 도움이 됩니다.
- 모바일 환경에서는 사용을 권장하지 않습니다.
Spacing
Checkbox group 내 각 선택지 사이의 간격을 일정하게 유지합니다. 가로 배치 시 spacing/300, 세로 배치 시 spacing/100을 각각 적용합니다.
선택지 사이에 임의의 간격을 적용하지 않습니다.
선택지 간 간격을 일관되지 않게 적용하지 않습니다.
Content
Validation
Checkbox group에서 선택 값에 대한 validation은 그룹 단위에서 이루어지기 때문에, validation message는 각 선택지가 아닌 group 하위에 노출합니다.
Group 선택 값에 대한 validation message를 각 선택지 하위에 노출하지 않습니다.
개별 선택지에 대한 validation은 선택지 하위에서 제공합니다.
Helper text가 제공되는 경우 validation message는 helper text 위에 위치합니다.
Behaviors
Interactions
Checkbox 자체 또는 항목 텍스트를 클릭하여 해당 항목의 선택 값을 토글합니다. 한 리스트에서 여러 항목을 선택할 수 있습니다.
Checkbox는 하위 항목을 갖는 트리 구조로 표현할 수 있으며, 이 때 상위 항목은 하위 항목을 대표합니다. 상위 checkbox는 하위 항목에 대한 전체 선택 및 선택 해제에 대한 기능을 수행할 수 있습니다.
하위 항목이 부분적으로 선택된 경우, 상위 checkbox는 indeterminate 상태로 표현되며 클릭 시 전체 항목 선택 해제를 수행합니다.
