Skip to content

InputNumber & InputRange

What component has

Keyboard support

Keyboard support
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
Up Arrow or Shift + Up ArrowIncreases the value.
Down Arrow or Shift + Down ArrowDecreases the value.
EnterSubmits the entered value.

See detailed information about the keyboard support for the input fields in the Keyboard control guide.

Roles & attributes

"The implicit role for the <input type="number"> element is spinbutton. If spinbutton isn’t an important feature for your form control, consider not using type="number". Instead, use inputmode="numeric" along with a pattern attribute that limits the characters to numbers and associated characters. With <input type="number">, there is a risk of users accidentally incrementing a number when they're trying to do something else. Additionally, if users try to enter something that's not a number, there's no explicit feedback about what they're doing wrong."

Find more in MDN guides:

InputNumber also has the same accessibility recommendations as Input has.

Considerations for designers

  • Focus must be visible.
  • Don’t hide the input label on focus.


  • A11y style guide describes core principles for the accessible inputs and textarea.
  • Forms tutorial from W3C helps you understand common methods for creating accessible forms.
  • Find live examples of accessible inputs with different types in DigitalA11y project.

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.