数値ステッパー
Number Stepper
別名: 数値入力ステッパー、増減ボタン、スピンボタン、Stepper、Spin button、Quantity stepper、Input stepper
生態（さわってみる）
数量: 1
一言定義
±ボタンで数値を1刻みずつ増減させる、数量入力に特化した入力UI。
分類
使う場面
- 個数・数量など、1刻みでの微調整が中心の数値入力のとき
- ボタン操作だけでタップ操作を完結させたい、モバイルのカート画面などのとき
避ける場面
- 桁数の大きい値や連続量を扱うとき（→スライダー）
- 手順・工程の現在位置を示したいとき（それは「ステッパー」の別義＝ステップバー。→ステップバー）
近縁種との比較
「ステッパー（Stepper）」という語は、本エントリが指す数値の増減ボタン（Number stepper / Spin button）と、複数手順の現在位置を示す進捗UI（本図鑑では「ステップバー」）という、 まったく別の2つの意味で使われる同名異義語であり、研究ノートの同義語表もこの混同への注意を 促している。前者は個数・数量など1刻みの微調整に、後者はフォームや購入フローの工程表示に 使うもので、混同すると設計意図が伝わらない。値の変化幅が大きい、あるいは連続量を扱う場合は スライダーの方が適する。
実例リンク
アクセシビリティ
- role
- ネイティブ input[type="number"] + 増減ボタン（type="button"、role指定は不要）
- キーボード操作
- ±ボタンはTabで到達しEnter/Spaceで実行。inputへの直接キー入力・上下矢印キーでの増減にも対応する
- 補足
- 「ステッパー」は数値入力の増減ボタン（本エントリ）と、複数手順の現在位置を示す進捗UI（ステップバー）の2つの意味で使われる同名異義語。現在値の変化はaria-live="polite"の領域で通知する