Number inputs
Number inputs allow users to input numbers or decrease/increase number values by attached buttons.
Using number inputs
Through number input fields users can input numbers.
Number inputs feature two buttons to decrement and increment the number by a certain step (default is 1). They are useful in context where users' task is about a quick numeral change in limited range.
Designing
Label
Number input labels communicate what input is requested in the input box. Labels are obligatory for input fields and should only be visibly hidden, but still accessible for screen readers in exceptional cases.
Placeholder text (optional)
Placeholder text provides an example of what type of information is being requested in the input box. Placeholder text should further illustrate and support the number input label, however they should never be the only input description. Use Base30 for it.
Inline error messages and form validation (optional)
When possible, place messages inline with where the error occurred and explain to users what caused the error and, or how it can be fixed. Utilize appropriate colors for different message types (Green50 for successful or Red50 for erroneous). Inline messages should only be shown after a user has clicked into or interacted with the corresponding input.