Check box
GUIDE
Checkbox는 리스트 요소를 선택하기 위해 사용하는 선택 컨트롤이며, 선택 컨트롤 중 유일하게 복수 선택이 가능합니다.
ANATOMY
-
색상값의 변화로 선택 유/무를 식별합니다.
-
리스트명을 표기합니다
-
선택된 개수 만큼 숫자가 표시됩니다.
SIZE
check box는 크게 두가지의 선택 기능을 가집니다.
하나만 선택하거나, 모두 선택할 수 있습니다.
icon type은 label과 함께 나열될 때 컴포넌트들의 높이에 큰 차이가 없어야 합니다.
number type은 다량의 옵션에 사용될 수 있어 icon 타입보다 상대적으로 크게 잡아 숫자 인식이 더 수월 할 수 있도록 구성됩니다.
STATES
checkbox의 상태별 정의는 다음과 같습니다.
USAGE
checkbox의 상태별 정의는 다음과 같습니다.
선택한 내용 자체가 중요한 경우 checkbox를 사용하고, 선택한 요소의 개수가 중요한 경우 number type을 사용합니다.
number type의 경우 선택한 순서대로 count하며, 다시 active 상태로 unselect할 경우 그 뒷자리 숫자들은 -1씩 차감됩니다.
number는 최대 3자리까지의 숫자가 올 수 있습니다. 999개를 초과할 시 ‘999+’로 표기가 제한됩니다.
number type의 경우 check box를 감싸고 있는 card component가 있을 경우 인터렉션이 카드 영역을 중심으로 작동될 수 있습니다. (개별 논의)
Icon type
리스트에서 icon check box 좌/우 배치는 화면 구조 및 맥락에 따라 결정될 수 있으나, check box의 의미를 나타낼 수 있는 label과의 거리가 너무 멀어지지 않도록 유의합니다.
icon type은 medium(모두 선택) 1개, small 여러개를 함께 사용하고자 두 종류로 구성하였으나,
사이즈와 무관하게 하나씩만 사용 가능합니다.
Number type
모델 옵션을 선택하는 경우와 같이 리스트 선택 개수가 5~10개를 초과할 가능성이 있는 경우에 사용합니다.
이미지 등 콘텐츠와 함께 사용되는 경우 우측 상단에 배치합니다.
다른 text component와 붙여서 사용하지 않는 것을 권장하지만, 필요 시 디자인 QA가 요구됩니다.
check box를 감싸고 있는 card component가 있을 경우 인터렉션이 카드 영역을 중심으로 작동될 수 있습니다. (개별 논의)
number는 최대 3자리까지의 숫자가 올 수 있습니다. 999개를 초과할 시 ‘999+’로 표기가 제한됩니다.
