Ensure the labels are precise and concise. Labels should only describe the number field they are associated with, and they must be visible.
When providing a validation message, make sure the instructions are clear and help users complete the field. For example, "Value must be greater than 20". In addition, use the helper text to provide instructions to help users understand how to complete the number field or to indicate any needed input, allowed formats, timing limitations, or other pertinent information.
These practices give screen readers and users of assistive technologies more information about the form, helping them to fill it out.
NumberField has conventional keyboard support.
- Users relying on the keyboard expect to move focus to each NumberField by using the tab key or shift+tab when moving backwards
- Users can press the up and down arrow keys to adjust the field value
disabledwill prevent NumberField from receiving keyboard focus or input
NumberField intentionally lacks support for autofocus. Generally speaking,
autofocus interrupts normal page flow for screen readers making it an
anti-pattern for accessibility.
NumberField is commonly used as an input in forms alongside submit buttons.
In these cases, users expect that pressing Enter or Return with the input
focused will submit the form.
Out of the box, NumberField doesn't expose an
onSubmit handler or
individual key event handlers due to the complexities of handling these
properly. Instead, developers are encouraged to wrap NumberField
<form> and attach an
onSubmit handler to that
Be sure to localize
Disabled NumberFields cannot be interacted with using the mouse or keyboard.
Whenever you want to provide more information about a form field, you should use
NumberField can display an error message.
Simply pass in an
errorMessage when there is an error present and we will handle the rest.
NumberField provides additional props specific to numerical input.
max can be used to define the acceptable bounds of the input (see the ref example for more about using these for validation).
step determines the amount incremented or decremented when using the input's arrow buttons. Set this as a float to allow decimal input.
Set a ref on NumberField to use the Constraint Validation API or to anchor a Popover-based element.
Note that while the arrow buttons will not exceed the min/max (if set), the user is free to enter any number using the keyboard. Validation should be performed explicitly using the Constraint Validation API to ensure the value is within the specified range.
Component quality checklist
Component is available in Figma across all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.