React Storefront |

QuantitySelector

A quantity selector with plus and minus buttons. Any extra props are spread to the underlying Material UI input element.

Import
import QuantitySelector from 'react-storefront/QuantitySelector'

Props

NameTypeDefaultDescription
namestring'quantity'

The name to apply to the input when rendering AMP.

classesobject

CSS classes

addIconelement

The plus icon

subtractIconelement

The minus icon

valuenumber1

The current value

minValuenumber1

The minimum value. Defaults to 1.

maxValuenumber100

The maximum value. Defaults to 100.

onChangefuncFunction.prototype

Called when the value is changed. The new value is passed as the only argument

productobject

If specified, this component will automatically control the price of a product. This should be an instance of ProductModelBase

ariaLabelstring'quantity'

The accessibility label. Add and subtract button aria-label values are derived from this as "add one {ariaLabel}" and "subtract one {ariaLabel}"

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • icon
  • button
  • input
  • focused
  • underline