QuantityStepper

한눈에#

장바구니 수량·인원수처럼 정수를 ±step 단위로 정밀하게 증감하는 −/값/+ 입력기입니다.

진행 단계 표시기 Stepper와 이름이 비슷하지만 역할이 다릅니다 — 이쪽은 수량 입력, Stepper는 진행 단계 표시입니다.

사용 시점#

정수를 ±step 단위로 정밀 증감하면 QuantityStepper — 어림 조절이나 진행 단계 표시는 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { QuantityStepper } from '@wds/ui-web';

<QuantityStepper aria-label="수량" min={0} max={10} step={1} />

변형#

단일 형태입니다 — −/값/+ 구성. 값 칸은 직접 타이핑할 수 있고, 위/아래 화살표 키로도 증감합니다. step으로 증감 단위를, min/max로 범위를 정합니다.

크기#

size로 2단 — md(기본)·sm. 두 크기 모두 −/+ 버튼의 히트 영역을 44px로 확장해 터치 타깃을 보장합니다.

상태#

비제어 컴포넌트입니다 — defaultValue로 시작하고 clamp된 값이 실제로 바뀔 때만 onChange가 발화합니다. 상·하한에서는 해당 버튼이 비활성화되고, 한계 도달 시 중복 발화하지 않습니다. 직접 입력한 값은 [min, max]로 clamp되며, 비숫자 입력은 무시하고 blur 시 마지막 유효값으로 복원합니다.

Props#

접근성#

• 루트는 role="group"으로 −/값/+ 를 하나의 컨트롤로 묶습니다(이름 중복 announce를 피하기 위해 이름은 값 입력에만 둡니다).
• 값 입력은 inputMode="numeric" + aria-label(필수)을 가지며, ArrowUp/ArrowDown으로 증감합니다.
• −/+ 버튼은 각각 aria-label("감소"/"증가")을 가지고, 한계 도달 시 disabled 됩니다.
• 입력은 경계에서 신뢰하지 않습니다 — 숫자만 받고 [min, max]로 clamp, 비숫자는 거부합니다.

토큰#

component 토큰 없이 semantic(+input 어휘)을 직접 소비합니다(신설 기준 §4 미충족).