11번가

Design System

Checkbox

Checkbox는 사용자가 선택 옵션들을 선택하고 제어할 수 있도록 옵션을 켜거나 끌 수 있습니다.
복수선택이 가능하며, 하나 혹은 여러개의 아이템을 단수 선택 / 복수 선택이 가능하도록 제공합니다.

Types

Checkbox의 사용성에 따라 Component Type 이 구분됩니다.
다중선택을 위한 Checkbox와 Checkbox그룹 내에서 다중선택이 필요할 시 Checkmark를 사용합니다.

Checkbox Type checkbox Component
  1. Checkbox : 사용자가 List에서 하나 이상의 옵션을 선택해야 하는 경우 이 선택 컨트롤을 사용합니다.
  2. Checkmark : checkbox그룹 내 여러선택 이 필요할 시 사용하며, 다른 확인란 상태와 관계없이 확인란을 선택하거나 선택취소가 가능합니다.

Anatomy

  1. Container
  2. Icon

State

Checkbox는 Selected/Unselected에 따라 Deselected, Selected, Disabled 상태로 분류됩니다.
Selected는 Active된 상태로 간주됩니다.

Checkbox의 상태별(Deselected, Selected, Disabled) 분류
Circle
Box
Checkmark
Deselected
Deselected Circle Type Checkbox
Deselected Box Type Checkbox
Deselected Checkmark Type Checkbox
Selected
Selected Circle Type Checkbox
Selected Box Type Checkbox
Selected Checkmark Type Checkbox
Disabled
Disabled Circle Type Checkbox
Disabled Box Type Checkbox
Disabled Checkmark Type Checkbox

Spec

Color

선택한 항목은 선택하지 않은 항목보다 시각적으로 명확해야 하므로 Primary Color(11STREET_Red)를 사용합니다.

Interactions

라디오 버튼을 직접 클릭하거나 레이블을 클릭할 수 있게하여 접근하기 쉬운 클릭 대상으로 사용합니다.

Placement

좌측 정렬을 기본으로, 좌측 마진은 16으로 고정이며, 컨트롤 아이콘과 레이블은 8의 패딩을 가지며, 선택 시 서로 간섭으로 인한 오류가 일어나지 않도록 리스트 내 16의 패딩을 갖습니다

Usage

항상 명확하고 간결한 레이블을 사용합니다. 혼란을 줄 수 있는 부정적인 레이블을 피하며 확인을 의미한다는 것을 레이블을 사용하여 상황을 명확하게 전달합니다.

Do

간결하고 명확한 레이블을 사용합니다.

Don't

부정적인 레이블을 피합니다.