Skip to main content

Number Input Guidelines

Use Number Input to enable users to enter valid numerical values in a form.

Anatomy​

  1. Label — Should be clean and concise. Sentence case, no colons.
  2. Input area — Can be manipulated with keyboard.
  3. Step buttons — Can be manipulated with cursor or ↑ or ↓ keys. Pressing it increments or decrements the input value by a specified amount.
  4. Postfix / Prefix (optional) — Should be added when expecting currency, percentage or numbers referring to a unit.

Behaviour​

  • Optionally, the first character may be a '-' character.
  • One or more characters in the range '0–9'.
  • Optionally followed by a '.' character and one or more decimal digits.
  • Number Input should ignore any invalid characters, simply by not letting them be entered. If the user pastes in invalid characters, an inline error is triggered and displayed until the error is resolved. Clicking a step button at this point resets the counter to the default value.
  • If the entered value exceeds the defined min or max, an error is triggered. Pressing a "step" button automatically changes the value to min+1 or max-1 and the error is resolved.

Best Practices​

  • Use a clear and concise label.
  • Make sure to display the initial value.
  • Adjust Number Input's size to the length of the expected value.

Help Users Enter Valid Values​

  • Use Number Input when expecting a numerical value. Don't use it for code or strings like IP addresses, phone numbers, or dates.
  • Mind the error messages — provide users actionable feedback, possibly on defocusing the input.
  • When min or max value is set, communicate it in an .e-field__message. Not necessary when min equals 0 or when expecting a percentage between 0% and 100% and the environment makes it clear.
  • Attach .e-field__postfix__text in front of the input when expecting currency.
  • Attach .e-field__postfix__text behind the input when expecting percentage or numbers referring to a unit.

Steps​

  • Clicking one of the buttons or pressing the ↑ or ↓ keys should increment/decrement the input value.
  • The step size should be 1 by default and can be configured to jump decimal values.
  • The counter should accelerate when the user keeps pressing the button or holding the mouse on one of the step buttons.