Quantity Toggle
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.
Example
Left disabled
<div class="cgds input-group" variant="quantity-toggle">
<button type="button" class="btn btn-primary btn-sm cgds" disabled><i class="bi bi-dash"></i></button>
<input id="quantityLeftDisabled" type="number" class="form-control text-center" value="0">
<button type="button" class="btn btn-primary btn-sm cgds" onclick="increment('LeftDisabled')"><i class="bi bi-plus"></i></button>
</div>
Right disabled
<div class="cgds input-group" variant="quantity-toggle">
<button type="button" class="btn btn-primary btn-sm cgds" onclick="decrement('RightDisabled')"><i class="bi bi-dash"></i></button>
<input id="quantityRightDisabled" type="number" class="form-control text-center" value="1">
<button type="button" class="btn btn-primary btn-sm cgds" disabled><i class="bi bi-plus"></i></button>
</div>
Left & right disabled
<div class="cgds input-group" variant="quantity-toggle">
<button type="button" class="btn btn-primary btn-sm cgds" disabled><i class="bi bi-dash"></i></button>
<input id="quantityLeftRightDisabled" type="number" class="form-control text-center" value="2" disabled>
<button type="button" class="btn btn-primary btn-sm cgds" disabled><i class="bi bi-plus"></i></button>
</div>
Enabled
<div class="cgds input-group" variant="quantity-toggle">
<button type="button" class="btn btn-primary btn-sm cgds" onclick="decrement('Enabled')"><i class="bi bi-dash"></i></button>
<input id="quantityEnabled" type="number" class="form-control text-center" value="3">
<button type="button" class="btn btn-primary btn-sm cgds" onclick="increment('Enabled')"><i class="bi bi-plus"></i></button>
</div>
Anatomy
- 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 vertical spacing within 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 or current 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 the 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.
