Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.

Number inputs

Number inputs allow users to input numbers or decrease/increase number values by attached buttons.

number input field

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.


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.

See WikimediaUI Figma number inputs component.


See OOUI's demos section of number inputs.