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+’로 표기가 제한됩니다.

 
Previous
Previous

Capsule Button