Documentation
Feedback
Guides
Storefront Development

Storefront Development
Quantity Selector

Quantity Selectors 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

Import the component from @faststore/ui

_10
import { QuantitySelector } from "@faststore/ui";

Import Styles

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


Usage


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


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-quantity-selector
maxnumberThe maximum value the quantity selector can receive
minnumberThe minimum value the quantity selector can receive1
initialnumberThe initial value for quantity selector
disabledfalse | trueSpecifies that the whole quantity selector component should be disabled.false
onChange(value: number) => voidEvent emitted when value is changed

Local tokenDefault value/Global token linked
--fs-qty-selector-widthcalc(var(--fs-control-tap-size) * 2.7)
--fs-qty-selector-heightcalc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2))
--fs-qty-selector-shadownone
--fs-qty-selector-shadow-hover0 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-radiusvar(--fs-border-radius)
--fs-qty-selector-border-widthvar(--fs-border-width)
--fs-qty-selector-border-width-hovervar(--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-sizevar(--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 tokenDefault value/Global token linked
--fs-qty-selector-button-bkg-color
transparent
--fs-qty-selector-button-border-radiusvar(--fs-qty-selector-border-radius)

Variants

Disabled


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

Local tokenDefault 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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page