Number input 数値入力（スピンボタン）

デモ

別名

• Spinbutton — WAI-ARIA APG
• Number input — Carbon Design System
• InputNumber — Ant Design
• Stepper (the − / + buttons) — Apple Human Interface Guidelines

見分けるポイント

幅の狭い入力欄の横に、小さな上下の矢印（または − と + のボタン）がある。

挙動

• 数値を直接入力するか、矢印で増減させる。
• このデモはネイティブの <input type="number"> に min・max・step を付けている。範囲外の値になると枠が赤くなる。
• APG では Home / End で最小値・最大値にするとしているが、ネイティブの要素では文字のカーソル移動になる。

キーボード操作

使い分け・注意点

• 数量のように小刻みに増減する値に使う。郵便番号やカード番号のように、数字でできた符号には使わない。
• type="number" を避けるデザインシステムもある。スクロールで値が変わってしまうことがあり、ブラウザによっては「e」などの文字も入るためである。代わりに inputmode="numeric" を付けたテキスト入力を使う方法がある。

似た部品との違い

• スライダー: 数値入力は正確な数値を入れるのに向き、スライダーはつまみで大まかな位置を選ぶ。
• ステップナビゲーション: Apple などは数値入力の − / + ボタンを「Stepper」と呼ぶ。この図鑑の Stepper は、複数画面の手続きの段階を示すステップナビゲーションのこと。

出典

• WAI-ARIA APG: Spinbutton Pattern (最終確認日: 2026-10-20)
• MDN: <input type="number"> (最終確認日: 2026-10-20)
• Open UI: Number (Input) (最終確認日: 2026-10-20)
• GOV.UK Design System: Text input (Numbers) (最終確認日: 2026-10-20)