Number input

Component checklist

Overview

Number inputs are similar to text inputs except they are used to designate numerical values only. Number inputs incrementally increase or decrease the value using two controls and reduce input efforts for adjusting small values.

When to use

• The user needs to input a numeric value
• Adjusting small values when increasing or decreasing them requires only a few clicks
• When users may not know exact values and only want to change the values that are relative to their current state

 

Formatting

Anatomy

1. Title (optional)
   The title helps users understand what information to enter into a number input. It is recommended unless you get an approved accessibility exemption. It can be supported by a help icon showing an explanatory tooltip on hover with more detailed information.
2. Input area
   The input area is a space to provide users to enter a numeric value.
3. Numeric value
   The value changes when a user enters a value into the field or uses the subtract or add controls.
4. Subtract button
   This icon triggers decremental values.
5. Add button
   This icon triggers incremental values.
6. Error message
   The error message communicates pertinent information that assists the user in completing a field in the right way. Error message appears when the inputted value is wrong and the input loses its focus state. The error message appears underneath the input area. For error messages, use sentence-style capitalization, and in most cases, write the text in full sentences with punctuation according to the content guidelines.

 

Behaviors

Interactions

• Mouse
  Users can click on the input field and change the value by typing inside the input field. Users can also increase or decrease the values by pressing the add or subtract button controls.
• Keyboard
  Users can navigate to the number input field by pressing Tab. Users can then increase the value by pressing Up arrow or decrease the value by pressing Down arrow.

Validation

An error state is triggered if the data is invalid or a required field is left empty. Error states have two visual indicators to signify invalid content: a red border and an error message.

Default values

Numeric input should always have a default. The default will usually be ‘1’. Sometimes, you will have the input value defaulted to ‘0’. For example, when there is an option to set up a custom button style, the default number of border width may be ‘1’ and the default number of border-radius ‘0’.