Quantity selector
Use our custom quantity selector in forms for incremental and decremental display of small numbers.
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="input-group 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-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
<span class="visually-hidden">Step up</span>
</button>
</div>
Sizing
Set small size using the contextual class .quantity-selector-sm
.
<div class="input-group 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-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-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="up">
<span class="visually-hidden">Step up</span>
</button>
</div>
Disabled
Add the disabled
boolean attribute on quantity selector elements to give it a grayed out appearance and remove pointer events.
<div class="input-group 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-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-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
<span class="visually-hidden">Step up</span>
</button>
</div>
Sass
Variables
For more details, please have a look at the exhaustive list of available variables:
$quantity-selector-width: 7.5rem;
$quantity-selector-sm-width: 5.5rem;
$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-icon-width: 1.5rem;
$quantity-selector-icon-sm-width: 1.375rem;
$quantity-selector-icon-add: $add-icon;
$quantity-selector-icon-add-sm: $add-icon-sm;
$quantity-selector-icon-add-height: 1.5rem;
$quantity-selector-icon-sm-add-height: 1.375rem;
$quantity-selector-icon-remove: $remove-icon;
$quantity-selector-icon-remove-sm: $remove-icon-sm;
$quantity-selector-icon-remove-height: 1.5rem;
$quantity-selector-icon-sm-remove-height: 1.375rem;
$quantity-selector-input-max-width: 2.625rem;
$quantity-selector-input-sm-max-width: 2.5rem;
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 Innovation Cup’s quantity selector form component exposes the classic change
event when the value of an input has been changed.
Method | Description |
---|---|
change
|
Fires immediately when the value inside the input is modified. |
const myQuantitySelector = document.getElementById('inputQuantitySelector')
myQuantitySelector.addEventListener('change', () => {
// do something...
})