QuantitySelector
Allow shoppers to choose the quantity of a product to buy.
1 min read
The
QuantitySelector component allows customers to select the quantity of a given product to purchase.Example
Code
Usage
Import the component
_10import { QuantitySelector } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
Examples
Unit multiplier
Set
unitMultiplier to the number of units in a pack and enable useUnitMultiplier. The selector displays multiples of that value while onChange receives the pack quantity.
_10<QuantitySelector_10 min={1}_10 max={10}_10 initial={1}_10 unitMultiplier={6}_10 useUnitMultiplier_10 onChange={(packs) => console.log(packs)}_10/>
Disabled
Example
Code
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-qty-selector-width | calc(var(--fs-control-tap-size) * 2.7) |
--fs-qty-selector-height | calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2)) |
--fs-qty-selector-shadow | none |
--fs-qty-selector-shadow-hover | 0 0 0 var(--fs-border-width) var(--fs-border-color-active) |
--fs-qty-selector-bkg-color | var(--fs-color-body-bkg) |
--fs-qty-selector-bkg-color-hover | var(--fs-qty-selector-bkg-color) |
--fs-qty-selector-border-radius | var(--fs-border-radius) |
--fs-qty-selector-border-width | var(--fs-border-width) |
--fs-qty-selector-border-width-hover | var(--fs-border-width) |
--fs-qty-selector-border-color | var(--fs-border-color) |
--fs-qty-selector-border-color-hover | var(--fs-border-color-active) |
--fs-qty-selector-text-size | var(--fs-text-size-base) |
--fs-qty-selector-text-color | var(--fs-color-text) |
--fs-qty-selector-text-color-hover | var(--fs-qty-selector-text-color) |
Design tokens: Button
| Local token | Default value/Global token linked |
|---|---|
--fs-qty-selector-button-bkg-color | transparent |
--fs-qty-selector-button-border-radius | var(--fs-qty-selector-border-radius) |
Design tokens: Disabled
| Local token | Default value/Global token linked |
|---|---|
--fs-qty-selector-disabled-bkg-color | var(--fs-color-disabled-bkg) |
--fs-qty-selector-disabled-text-color | var(--fs-color-disabled-text) |
--fs-qty-selector-disabled-border-color | var(--fs-qty-selector-disabled-bkg-color) |
Data attributes
You can target and override
QuantitySelector styles using the following data attributes:data-fs-quantity-selectordata-fs-quantity-selector=["disabled"]data-quantity-selector-button="left" | "right"data-quantity-selector-inputProps
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-quantity-selector |
| max | number | The maximum value the quantity selector can receive | |
| min | number | The minimum value the quantity selector can receive | 1 |
| initial | number | The initial value for quantity selector | |
| unitMultiplier | number | Controls by how many units the value advances | 1 |
| useUnitMultiplier | false | true | Controls wheter you use or not the unitMultiplier | |
| disabled | false | true | Specifies that the whole quantity selector component should be disabled. | false |
| onChange | (value: number) => void | Event emitted when value is changed | |
| onValidateBlur | (min: number, maxValue: number, quantity: number) => void | Event emitted when value is out of the min and max bounds |