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="sgds input-group" variant="quantity-toggle">
<button type="button" class="btn btn-primary btn-sm sgds" 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 sgds" onclick="increment('LeftDisabled')"><i class="bi bi-plus"></i></button>
</div>Right disabled
<div class="sgds input-group" variant="quantity-toggle">
<button type="button" class="btn btn-primary btn-sm sgds" 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 sgds" disabled><i class="bi bi-plus"></i></button>
</div>Left & right disabled
<div class="sgds input-group" variant="quantity-toggle">
<button type="button" class="btn btn-primary btn-sm sgds" disabled" 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 sgds" disabled><i class="bi bi-plus"></i></button>
</div>Enabled
<div class="sgds input-group" variant="quantity-toggle">
<button type="button" class="btn btn-primary btn-sm sgds" 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 sgds" 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 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.
Last updated 22 November 2023
