QuantitySelector

QuantitySelector

Allow shoppers to choose the quantity of a product to buy.

The QuantitySelector component allows customers to select the quantity of a given product to purchase.

Overview

Example

Code

Import the component from @faststore/ui


_10import { QuantitySelector } from "@faststore/ui";

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


_10import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";


_10<QuantitySelector min={1} max={10} initial={5} />

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)`

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)`


_10<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)`

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