Number input

NumberInput displays a default numeric value that users can increase or decrease using the controls or by keyboard actions. Users can also manually enter a specific value. This is particularly useful in scenarios where users need to make small adjustments to a value within a defined range.

Also known as: Spin Button, Stepper Input

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

Wrap NumberInput in FormField to provide the field with a visible label, help text and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions.

Keyboard interactions

Number input inherits keyboard interactions from Input.

The following interactions are specific to NumberInput.

Key	Function
`Up arrow`	When the input area has focus, Up arrow increases the number by the increment value (default to 1), up to the maximum value if set.
`Shift` + `Up arrow`	When the input area has focus, this action increases the number by a multiple of the standard step size (default to 2).
`Page up`	When the input area has focus, Page up increases the number by a multiple of the standard step size (default to 2), up to the maximum value if set.
`End`	When the input area has focus, End increases the number to the maximum value.
`Down arrow`	When the input area has focus, Down arrow decreases the number by the increment value (default to 1), up to the minimum value if set.
`Shift` + `Down arrow`	When the input area has focus, this action decreases the number by a multiple of the step size (default to 2), up to the maximum value if set.
`Page down`	When the input area has focus, Page down decreases the number by a multiple of the step size (default to 2), up to the maximum value if set.
`Home`	When the input area has focus, Home decreases the number to the minimum value.

Best practices

Keyboard interactions

Number input inherits keyboard interactions from Input.

The following interactions are specific to NumberInput.

Key	Function
`Up arrow`	When the input area has focus, Up arrow increases the number by the increment value (default to 1), up to the maximum value if set.
`Shift` + `Up arrow`	When the input area has focus, this action increases the number by a multiple of the standard step size (default to 2).
`Page up`	When the input area has focus, Page up increases the number by a multiple of the standard step size (default to 2), up to the maximum value if set.
`End`	When the input area has focus, End increases the number to the maximum value.
`Down arrow`	When the input area has focus, Down arrow decreases the number by the increment value (default to 1), up to the minimum value if set.
`Shift` + `Down arrow`	When the input area has focus, this action decreases the number by a multiple of the step size (default to 2), up to the maximum value if set.
`Page down`	When the input area has focus, Page down decreases the number by a multiple of the step size (default to 2), up to the maximum value if set.
`Home`	When the input area has focus, Home decreases the number to the minimum value.

Best practices

Keyboard interactions

Number input inherits keyboard interactions from Input.

The following interactions are specific to NumberInput.

Key	Function
`Up arrow`	When the input area has focus, Up arrow increases the number by the increment value (default to 1), up to the maximum value if set.
`Shift` + `Up arrow`	When the input area has focus, this action increases the number by a multiple of the standard step size (default to 2).
`Page up`	When the input area has focus, Page up increases the number by a multiple of the standard step size (default to 2), up to the maximum value if set.
`End`	When the input area has focus, End increases the number to the maximum value.
`Down arrow`	When the input area has focus, Down arrow decreases the number by the increment value (default to 1), up to the minimum value if set.
`Shift` + `Down arrow`	When the input area has focus, this action decreases the number by a multiple of the step size (default to 2), up to the maximum value if set.
`Page down`	When the input area has focus, Page down decreases the number by a multiple of the step size (default to 2), up to the maximum value if set.
`Home`	When the input area has focus, Home decreases the number to the minimum value.