Spin button

Spin button (스핀 버튼)

스핀 버튼은 설정된 범위 안에서 값을 쉽게 늘리거나 줄이게 해 주는 특수한 입력 요소예요. 한 달 안의 날짜처럼 범위가 정해진 값을 위아래로 조정할 때 쓰죠.

스핀 버튼은 작은 범위에서 정밀한 증분(증가량)에 좋아요. 범위가 아주 크거나 아주 작으면(값이 세 개 미만) input을 대신 사용하세요. 값이 부정확해도 되고 범위 위의 값에 대한 시각적 표현이 도움 된다면 slider를 시도해 보세요.

출처: React Spin button 문서

본문

Behavior (동작)

Spin button interactions (스핀 버튼 상호작용)

사람들은 입력란에 값을 직접 입력하거나, 키보드 화살표로 값을 바꾸거나, 스핀 버튼을 선택해서 값을 선택할 수 있어요.

증분은 합리적이어야 해요. 예를 들어 한 달 안의 날짜를 고른다면 1씩 증가하도록요. 큰 범위를 탐색하기 쉽게 만드는 벌크(bulk) 세트를 정의할 수도 있어요. 사람들은 Page up이나 Page down 키로 벌크 단위로 증가시킬 수 있어요. Home 키로 범위의 첫 번째 정의 값으로, End 키로 범위의 마지막 정의 값으로 점프할 수도 있어요.

Disabled spin buttons (비활성화된 스핀 버튼)

최솟값이나 최댓값에 도달하면 해당 스핀 버튼이 비활성화되어, 사람들이 범위의 끝에 도달해서 더 이상 올리거나 내릴 수 없다는 것을 알게 해 줘요.

스핀 버튼이 비활성화될 수는 있지만, 접근 가능한 목표 크기를 유지하려면 입력란 자체는 항상 활성화되어야 해요.

Disabled spin button correct

Disabled spin button incorrect

Accessibility (접근성)

범위의 크기를 정의하려면 aria-valuemin과 aria-valuemax를 사용하세요. 이렇게 하면 허용 가능한 범위의 크기를 화면 낭독기에 전달할 수 있어요.

Content (콘텐츠)

Units of measurement (측정 단위)

스핀 버튼에 연결된 단위가 있다면 기본적으로 placeholder 텍스트에 포함하세요. 예를 들어 "0 cm"나 "12 pt"처럼요. 자세한 내용은 Microsoft Writing Style Guide의 Units of measure terms를 참고하세요.

Units of measurement

Use a label (라벨 사용)

간결한 라벨로 사람들이 어떤 정보를 입력해야 하는지 알게 하세요. 보통 명사나 짧은 구절이 가장 좋아요. 도움말 텍스트와 검증 스타일을 포함한 표준화된 폼 컴포넌트가 필요하다면 spin button field 컴포넌트를 사용하세요.

문장형 대문자 표기—첫 단어만 대문자로—를 사용하세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization을 참고하세요.

더 알아보기 (Learn more)