The quantity toggle component is used to increase or decrease an incremental venue, usually best used when the user needs to enter or adjust the quantity of a selected item.
Quantity field: Informs the user what the current value is.
Button: Allows users to increase or decrease a value.
Spacing
Within the quantity toggle
Ensure that there is at least 16px of horizontal spacing withi the quantity toggle.
Usage guidelines
Quantity toggle should be used:
When the numeric field needs to be adjusted by a small amount that can be done with only a few clicks.
Quantity toggle should not be used:
The numeric field can take a large range of values.
Usability guidelines
Ensure that a default value is shown within the field.
List the current value of the input so that user is able to know how much the value should increase/decrease upon clicking on up/down button.
Enable the user to also choose to type a number in the field.
User may prefer to type the value instead of clicking on the buttons, so such options should remain enabled.