Stepper input

Lab component

Also known as

Spin Button, Number Input

StepperInput 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.

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

Wrap StepperInput 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.

Stepper input inherits keyboard interactions from Input.

The following interactions are specific to Stepper Input.

KeyFunction
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 the step block value (default to 10), up to the maximum value if set.

Page up

When the input area has focus, Page up increases the number by the step block value (default to 10), 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 decresases 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 the step block value (default to 10), up to the maximum value if set.

Page down

When the input area has focus, Page down decreases the number by the step block value (default to 10), up to the maximum value if set.

Home

When the input area has focus, Home decreases the number to the minimum value.