Checkbox
선택할 수 있는 옵션을 나타내는 상자 형태의 컴포넌트입니다.
항목을 선택하거나 선택 해제할 때
사용하며 단일, 다중 선택지가 제공될 수 있습니다.

A
General Select / Unselect Checkbox
Anatomy

-
1. Container
선택 가능한 영역을 나타냅니다.
-
2. Icon
선택여부에 따라 아이콘으로 표시합니다.
-
3. Text
옵션에 대한 정보를 우측에 배치합니다.
-
4. Background (Optional)
정보를 그룹화하기 위해 구성되는 영역입니다.

Types
General Checkbox
텍스트와 함께 구성하는 기본적인 체크박스입니다.


Do
명확한 인지를 위해 그룹화하여 구성할 수 있습니다.

Do
높은 우선순위의 내용은 강조하여 사용할 수 있습니다.

Don't
단일 선택만 가능한 경우에는 체크박스가 아닌 라디오 버튼 사용합니다.

Don't
선택된 항목과 선택되지 않은 항목이 모호하게 구분하지 않습니다.

Exception
구매, 결제 수단을 선택하거나 단일 선택지로 사용할 수 있습니다.
States
리모컨의 포커스와 선택 여부에 분류합니다.

Usage
General Usage


Don't
체크박스 내 하위 체크박스로 구성하여 사용하지 않습니다.