What component has
|Moves focus to the next focusable element.|
|Moves focus to the previous focusable element.|
|Increases the value.|
|Decreases the value.|
|Submits 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 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.
See more accessibility recommendations in the common Accessibility guide.