Number input
A number input allows users to enter numeric values, often with step controls.
Published: Last updated:
Overview
Number inputs are similar to text inputs but are designed exclusively for numeric values. They feature a two-segment control that allows users to incrementally increase or decrease the number, making it easier to adjust small values efficiently
When to use
- The user needs to input a numeric value.
- When making small adjustments quickly with minimal clicks.
- When users may not know the exact value and want to change it relative to the current state.
When not to use
- Avoid using a number input when large value changes are expected. For example, increasing from 1 to 30 may require many clicks, making it inefficient. In such cases, consider using a slider for large numeric ranges.
- Not recommended for continuous variables like prices, distances, lengths, or heights. When precise values within a wide range are needed, a text input is more suitable.
- Label text: Text that guides users on the required input for the field. It is mandatory unless an approved accessibility exemption applies.
- Value: The value updates when the user types into the field or uses the increment and decrement controls.
- Input field: The input field is the container where users enter data and must meet a 3:1 non-text contrast ratio for accessibility.
- Icon: Used to indicate required data or provide validation feedback.
- Assistive text (optional): Additional text that offers support or context to the input label.
- Helper text (optional): Text that offers additional guidance or context for the input field, often explaining the required data format.
- Input action buttons: Triggers incremental and decremental values.
Size
Number inputs come in two sizes: small and medium. These options provide flexibility in layout design, but field heights should remain consistent when grouping form components on the same page.
|
Size
|
Height (px/rem)
|
Use case
|
|---|---|---|
| Small | 32 / 2 | Use when space is limited |
| Medium | 44 / 2.75 | This is the standard size and the most frequently used. If unsure, opt for the medium size |
Small input pending
Label
Clear labelling helps users understand what information to enter in a number input. Number fields should always have a label.
- Use sentence-style capitalisation for all labels, except for product names and proper nouns.
- Keep labels short and concise.
- Do not use colons after label names.
Assistive / helper text
Optional assistive and helper text provides relevant information to assist users in accurately completing a field and is often used to clarify the required data format.
Assistive text sits directly below the input label and offers support or context to the input label, whereas the helper text offers additional guidance or context for the input field, often explaining the required data format.
- Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.
- When used, helper text appears persistently beneath the field, except when replaced by an error message.
States
Number inputs have multiple interactive states: resting, focus, error, disabled, and read-only. For more details on these interactive states, refer to the style tab.
|
State
|
When to use
|
|---|---|
| Resting | When the number input is active but not being directly interacted with, it is in its default or normal state. An enabled number input should display a default value. |
| Focus | When a user tabs to or clicks on the number input, it enters the focused state, signalling that the user has successfully navigated to the component. |
| Active | When a user is actively typing content into the field. |
| Error | When a user tabs to or clicks on the number input, the field or controls receive focus, indicating successful navigation to the component. |
| Disabled | When the user cannot interact with a component and all interactive functions have been disabled. Unlike read-only states, disabled states are not focusable, are not read by screen readers, and do not need to meet visual contrast requirements, making them inaccessible if interpretation is necessary. |
| Read-only | When the user can review but not modify the component. This state disables all interactive functions, similar to the disabled state, but it remains focusable, accessible by screen readers, and meets visual contrast requirements for readability. |
Assistive / helper text in disabled and read-only states
Number inputs in disabled and read-only states do not require assistive / helper text because users cannot modify their content, eliminating the need for guidance on data entry. In these states, any necessary context should be provided through labels or surrounding content rather than additional helper text that might imply interactivity.
Validation
Number input data should be validated upon form submission. For comprehensive guidance on errors and validation, refer to the form pattern.
Validation messages take precedence over helper text and will replace it when triggered. If an input displays helper text, it will be hidden in favour of the validation message when an error state occurs.
Error
An error state is triggered when invalid data is entered or a required field is left empty. It is visually indicated by a red border, an error icon, and an error message to help users identify and correct the issue.
Mouse
Users can activate a number input by clicking on the field container. A separate click is needed for additional actions like an input action button.
Keyboard
Users can navigate to the number input field by pressing Tab. Once focused, they can increase the value with the Up arrow key or decrease it with the Down arrow key.
Default values
A numeric input should always include a default value, which is typically set to ‘1’. In some cases, the default may be ‘0’. For example, when booking a hotel room, the default number of adults might be set to ‘1’, while the default number of children is set to ‘0’.
Inputs with icons
Icons in number inputs can provide helpful visual cues. They should always serve a clear purpose and support the user’s task, not distract from it. Icons must be intuitive and consistently styled to ensure clarity for users.
- Icons should always appear on the left of the input
- Icons used in inputs should be directly related to the intended value entered by the user.