본문으로 건너뛰기
입력

수량 스테퍼

줄이기 버튼, 현재 수량과 늘리기 버튼을 세 칸으로 나누어 보여 준다.

상태

1
min
3
middle
5
max
2
disabled

활용 방법

장바구니 수량

name을 지정하면 현재 수량이 hidden input으로 form에 포함된다.

Preview
2
tsx
<QuantityStepper name="quantity" defaultValue={2} max={10} />

속성

이름타입기본값설명
valuenumber-
defaultValuenumber1
min / maxnumber1 / 99
onValueChange(value: number) => void-