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

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

  • Anatomy
  • Types
    • General Checkbox
  • States
  • Usage
    • General Usage