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 Toggle Anatomy
  1. Quantity field: Informs the user what the current value is.
  2. Button: Allows users to increase or decrease a value.

Spacing

Quantity Toggle 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.

Home


Previous version 2.1.1