Spinbutton
スピンボタン
スピンボタンは、セット範囲から1つの値を選択するコントロールのARIA名です。通常、ユーザーは値を入力するか、増減させることができます。数値ステッパーがその一例です。
実際の例
実験室の作業者は温度を37.5°Cに設定します。Arrow Upは0.5を加算し、Page Upは5を加算し、値は確認済みの最大値45°Cで停止します。無効なテキストを貼り付けると、静かに変更するのではなくエラーが表示されます。
主な部分
- 01編集可能な値
- 02増分コントロール
- 03境界とステップ
以下の場合に使用します
人々が値を設定ステップで調整することが多く、値を入力する必要もある場合に使用します。値には明確な制限が必要です。
以下の場合は使用しないでください
プラスおよびマイナスボタンだけではスピンボタンになりません。制限のない値、非常に長い選択リスト、または通常の入力の方が明確なタスクでは避けてください。
コードで使用する名前
input[type=number] or role=spinbutton with valuemin/valuemax/valuenow 出荷前に
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome：Complete the task with スピンボタン (Spinbutton)。 User context：実験室の作業者は温度を37.5°Cに設定します。Arrow Upは0.5を加算し、Page Upは5を加算し、値は確認済みの最大値45°Cで停止します。無効なテキストを貼り付けると、静かに変更するのではなくエラーが表示されます。 Recommended pattern：スピンボタン (Spinbutton)。 Why it fits：人々が値を設定ステップで調整することが多く、値を入力する必要もある場合に使用します。値には明確な制限が必要です。 Do not use it when：プラスおよびマイナスボタンだけではスピンボタンになりません。制限のない値、非常に長い選択リスト、または通常の入力の方が明確なタスクでは避けてください。 Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：この標準は、列挙された範囲のみを対象とします。視覚スタイル、製品の判断、またはVibularyの例は選びません。 Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
このリクエストを確認する
Review how スピンボタン (Spinbutton) is used now. Definition: スピンボタンは、セット範囲から1つの値を選択するコントロールのARIA名です。通常、ユーザーは値を入力するか、増減させることができます。数値ステッパーがその一例です。 Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.