Number Input Usage

사용자가 숫자 입력을 할 수 있도록 돕습니다.

Layout

Spacing

필드는 텍스트 레이블과 spacing/100 간격을 두고 배치합니다. 필드와 validation message 또는 helper text 와의 간격에는 spacing/50을 적용합니다.

Content

Steps

필드 내부에서 제공되는 Add(+), Subtract(-) 아이콘 버튼은 사용자가 값을 쉽게 입력할 수 있도록 돕습니다. 위, 아래 화살표 키로도 입력 조정이 가능합니다. ↑키는 add, ↓키는 subtract를 수행합니다.

입력 값을 변경하고 싶을 때, 값을 더하거나 뺄 수 있는 단위를 step으로 지정할 수 있습니다. 별도 지정 값이 없는 경우, step은 1 단위로 기본 제공됩니다. Add 또는 Subtract 아이콘 버튼 위에 커서를 올릴 때 지정된 step이 name tooltip을 통해 나타납니다.

제공 범위 내의 최소 또는 최대 입력 값이 필드 내에 입력된 경우 아이콘 버튼은 비활성화될 수 있습니다. 필드 내 입력된 값이 없거나, 현재 값이 제공 범위의 최소 값으로 입력된 상태에서는 Subtract(-) 아이콘 버튼을 사용할 수 없습니다. 현재 값이 제공 범위의 최대 값으로 입력된 상태에서는 Add(+) 아이콘 버튼을 사용할 수 없습니다.

Optional Field

입력 여부가 선택 사항인 경우에는 텍스트 레이블 뒤 (optional) 접미사를 붙입니다. 선택 항목의 경우 입력 값이 비어있어도 form 제출이 가능합니다.

Behaviors

Input Format

사용자가 특정 값을 필드에 직접 입력할 수 있으며, 숫자 입력만 지원합니다. 입력 값은 천 단위로 쉼표(,) 처리 합니다.

Range

입력 범위가 주어질 때는 최소 또는 최대 입력 값을 벗어나는 값을 입력할 수 없습니다. 입력 값이 최소 입력보다 낮을 때는 최소 입력으로, 최대 입력보다 클 때는 최대 입력으로 처리됩니다.