Quantity Selector
The QuantitySelector component allows customers to select the quantity of a given product to purchase.
Overview
Import
Import the component from @faststore/ui
import { QuantitySelector } from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/molecules/QuantitySelector/styles.scss';
@import '@faststore/ui/src/components/atoms/Button/styles.scss';
@import '@faststore/ui/src/components/atoms/Input/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
<QuantitySelector min={1} max={10} initial={5} />Props
| 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 |
| 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) |
Nested Elements
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) |
Variants
Disabled
<QuantitySelector min={1} max={10} initial={5} 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) |
Customization
For further customization, you can use the following data attributes:
data-fs-quantity-selector
data-fs-quantity-selector=["disabled"]
data-quantity-selector-button="left" | "right"
data-quantity-selector-input