quantity-selector.md

layout	title	description	group	aliases	toc	added
docs	Quantity selector	Use our custom quantity selector in forms for incremental and decremental display of small numbers.	forms	/docs/forms/quantity-selector/	true	5.2

{{< added-in "5.2.0" >}}

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.

{{< example >}}

Step down Step up

{{< /example >}}

Sizing

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

{{< example >}}

Step down Step up

{{< /example >}}

Disabled

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

{{< example >}}

Step down Step up

{{< /example >}}

Sass

Variables

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

{{< scss-docs name="quantity-selector" file="scss/_variables.scss" >}}

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.

Method	Description
change	Fires immediately when the value inside the input is modified.

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