Stepper input
Lab componentStepper 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.
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.
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 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. |
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.
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 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. |
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.
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 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. |