Quantity Selector

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

Overview

Import the component from @faststore/ui

import { QuantitySelector } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/molecules/QuantitySelector/styles.scss'

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

Name	Type	Description	Default
Coming Soon

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

Local token	Default value/Global token linked
`--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-icon-color`	`var(--fs-color-link)`

Local token	Default value/Global token linked
`--fs-qty-selector-button-shadow`	`none`
`--fs-qty-selector-button-shadow-hover`	`none`
`--fs-qty-selector-button-bkg-color`	`transparent`
`--fs-qty-selector-button-bkg-color-hover`	`var(--fs-color-primary-bkg-light)`
`--fs-qty-selector-button-bkg-color-focus`	`var(--fs-qty-selector-button-bkg-color-hover)`
`--fs-qty-selector-button-border-radius`	`var(--fs-qty-selector-border-radius)`

<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-icon-color`	`var(--fs-border-color-light-disabled)`
`--fs-qty-selector-disabled-border-color`	`var(--fs-qty-selector-disabled-bkg-color)`
`--fs-qty-selector-disabled-button-bkg-color`	`var(--fs-qty-selector-button-bkg-color-hover)`

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