11번가

Design System

Stepper

스테퍼(Stepper)는 아이콘 선택으로 입력값을 조절하는 요소입니다.
일반적으로 숫자를 입력하거나 특정 수치를 단계별로 증가 또는 감소시킬때 사용하여 값을 높이거나 낮춥니다.

Types

Stepper는 사용성에 따라 Type을 구분하여 사용합니다.
숫자를 더하기 또는 빼기 아이콘 컨트롤을 눌러 값을 늘리거나 줄일 수도 있으며 입력 필드를 클릭하여 값을 입력하고 변경할 수 있습니다.

  1. Plus Minus : 사용자가 빼기 또는 더하기 컨트롤을 사용할 때 값이 변경됩니다.
  2. Number input : 입력필드를 클릭하여 수량을 조절하고 값을 입력하여 변경합니다.

Anatomy

  1. Numeric value
  2. Subtract icon
  3. Add icon

Spec

Setting

숫자 입력에는 항상 기본값을 설정합니다.

Interactions

역할에 맞게 +,- 버튼을 직접 클릭하여 숫자를 변경하거나 입력 전체를 클릭할 수 있게하여 접근하기 쉬운 클릭 대상으로 사용합니다.

Placement

컨트롤 아이콘과 32고정이며, 숫자입력 영역은 가변영역으로 숫자는 센터 정렬을 합니다.

Usage

숫자 입력에는 항상 기본값이 있어야 합니다. 기본값은 일반적으로 '1'을 설정하고 경우에 따라 입력 값이 '0'으로 기본 설정되어 있을 수 있습니다.

Do

대부분의 사용자가 선택할 가능성이 있는 명확한 기본값을 설정하십시오.

Don't

값 입력을 공백으로 두지 마십시오.