Quantity Toggle

Example

<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" id="right-btn-left-disabled"><i class="bi bi-plus"></i></button>
</div>

<div class="sgds input-group" variant="quantity-toggle">
    <button type="button" class="btn btn-primary btn-sm sgds" id="left-btn-right-disabled"><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>

<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>

<div class="sgds input-group" variant="quantity-toggle">
    <button type="button" class="btn btn-primary btn-sm sgds" id="left-btn"><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" id="right-btn"><i class="bi bi-plus"></i></button>
</div>

Anatomy

1. Quantity field: Informs the user what the current value is.
2. 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

Best practices:

1. When setting limits on number entry, immediately provide feedback by changing the button's state to disabled, rather than allowing users to encounter limits through an error message.

Quantity toggle should be used when:

1. When the numeric field needs to be adjusted by a small amount that can be done with only a few clicks.
2. When users may not know exact values and only want to change the values that are relative to its current state.

Quantity toggle should not be used when:

1. 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.

Behaviour
The quantity toggle should have a series of states for when user tabs or clicks/interacts with on the quantity toggle; hover, focus, enabled and disabled.

Accessibility guidelines

Aria attributes

1. The button aria-label values should be plain text and they should include context of what they affect when activated (typically the label for the input). e.g. Increase Quantity, Add Quantity.

Keyboard accessibility

1. Tab or Shift-Tab to focus on quantity toggle's input element.
2. ↑ or ↓ to change value of the input.

Focus indicator

1. Provide clear visual indicators for focused elements to help users identify the active element.
2. Ensure a logical and intuitive focus order (decrease button, input field, increase button) for seamless navigation.
3. When the quantity value is updated, ensure the focus remains on the active element (button or input field) to avoid disrupting the user experience.
4. Disable buttons when limits are reached (e.g., quantity cannot go below 1 or above a maximum value).
5. Ensure disabled buttons are not focusable.