수량 스테퍼

적은 수량을 늘리고 줄일 때. 값의 범위가 넓으면 그냥 숫자 입력이 낫습니다.

코드

<div class="jt-stepper">
  <button class="jt-stepper-btn" aria-label="수량 줄이기">−</button>
  <input class="jt-stepper-input" type="number" value="12" aria-label="수량">
  <button class="jt-stepper-btn" aria-label="수량 늘리기">+</button>
</div>

하지 말 것

• 가운데 입력칸을 읽기 전용으로 만들지 마세요. 100개를 넣으려면 100번 눌러야 합니다.

접근성

• − + 버튼에 각각 aria-label 필수
• 각 버튼이 44px 터치 타깃을 확보합니다

앱에서 모양 바꾸기

이 컴포넌트는 별도 노브가 없습니다. 크기·색이 다르게 필요하면 도움말로 요청하세요 — 토큰에 먼저 추가한 뒤 씁니다.

관련