Added in v5.2

View on GitHub

Quantity selector

Use our custom quantity selector in forms for incremental and decremental display of small numbers.

On this page

Default

Quantity selector is a form element used to select a number.

Please note that this component is suitable for incremental and decremental display of small numbers, i.e. numbers with 3-4 digits. We do not recommend using it with larger numbers.

A default value can be specified with the input value attribute.

Value will vary between the values defined for the min and max attributes (negative value are allowed). min and max values are customizable.

step attribute is also customizable and define the interval between values.

<div class="quantity-selector">
  <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
    <span class="visually-hidden">Step down</span>
  </button>
  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
    <span class="visually-hidden">Step up</span>
  </button>
</div>
html

Sizing

Set small size using the contextual class .quantity-selector-sm.

<div class="quantity-selector quantity-selector-sm">
  <input type="number" id="inputQuantitySelectorSm" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
  <button type="button" class="btn btn-icon btn-outline-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="down">
    <span class="visually-hidden">Step down</span>
  </button>
  <button type="button" class="btn btn-icon btn-outline-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="up">
    <span class="visually-hidden">Step up</span>
  </button>
</div>
html

Disabled

Add the disabled boolean attribute on quantity selector elements to give it a grayed out appearance and remove pointer events.

<div class="quantity-selector">
  <input type="number" id="inputQuantitySelectorDisabled" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
    <span class="visually-hidden">Step down</span>
  </button>
  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
    <span class="visually-hidden">Step up</span>
  </button>
</div>
html

CSS

Sass variables

For more details, please have a look at the exhaustive list of available variables:

scss/_variables.scss 
$quantity-selector-width:                 7.5rem;
$quantity-selector-sm-width:              5.625rem;

$quantity-selector-btn-padding-x:         add($btn-icon-padding-x, 2px);
$quantity-selector-btn-padding-x-sm:      add($btn-icon-padding-x-sm, 2px);
$quantity-selector-btn-bg:                var(--#{$prefix}body-bg);
$quantity-selector-btn-border:            var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-subtle);

$quantity-selector-disabled-color:        var(--#{$prefix}disabled-color);
$quantity-selector-disabled-bg:           var(--#{$prefix}body-bg);

$quantity-selector-icon-width:            .875rem;
$quantity-selector-icon-sm-width:         .625rem;

$quantity-selector-icon-add:              $add-icon;
$quantity-selector-icon-add-sm:           $add-icon-sm;
$quantity-selector-icon-add-height:       .875rem;
$quantity-selector-icon-sm-add-height:    .625rem;

$quantity-selector-icon-remove:           $remove-icon;
$quantity-selector-icon-remove-sm:        $remove-icon-sm;
$quantity-selector-icon-remove-height:    .125rem;
$quantity-selector-icon-sm-remove-height: .125rem;

$quantity-selector-input-max-width:       2.5rem;
$quantity-selector-input-sm-max-width:    1.875rem;

Usage

Via data attributes

The data-bs-round attribute will help you to define the number of digits to appear after the decimal point.

Events

Boosted’s quantity selector form component exposes the classic change event when the value of an input has been changed.

MethodDescription
change

Fires immediately when the value inside the input is modified.

const myQuantitySelector = document.getElementById('inputQuantitySelector')
myQuantitySelector.addEventListener('change', () => {
  // do something...
})