QuantityPicker
Compact increment and decrement control for cart and product quantity selection.
Best for
Import
import { QuantityPicker } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use QuantityPicker when the visitor should adjust item count with small predictable steps. It fits cart rows, buy boxes, and quick-view purchase flows.
If the quantity range is large or freeform numeric entry matters, another input pattern may be clearer.
Composition notes
value and onChange are the core state pair. Add min and max when business rules should clamp the allowed range, use size="sm" for tighter surfaces, and pass decrementAriaLabel, incrementAriaLabel, or valueAriaLabel when the surrounding storefront language should localize accessibility copy.
Use classNames when a consumer needs a different control personality without forking the behavior. The root remains controlled by className, while the internal value, buttons, and icons can be restyled semantically.
Keep the picker connected to the same inventory and pricing state as the rest of the purchase flow.
Behavior and theming guidance
Show clear feedback at the limits so visitors understand why they cannot decrement or increment further. If the max comes from inventory, consider pairing the picker with nearby stock messaging.
Use the smaller size only when surrounding controls are also compact. Mixing picker densities in one buy flow can feel uneven.
Examples
Live examples you can edit directly in the sandbox.
Standard stepper
Use the default size in carts and buy boxes where quantity is part of the main purchase flow.
Bounded range
Use explicit min and max limits when inventory, bundle rules, or business logic constrain the allowed quantity.
Localized accessibility labels
Pass custom aria labels when the storefront language or accessibility copy should differ from the English defaults.
Wildly different chrome with semantic hooks
Use classNames to restyle the shell, buttons, icons, and value readout without targeting internal button markup or aria-live selectors.
Slots
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current quantity value |
| onChange | (value: number) => void | — | Callback fired with the new quantity when the user increments or decrements |
| min | number | 1 | Minimum allowed quantity; decrement button disables at this value |
| max | number | 99 | Maximum allowed quantity; increment button disables at this value |
| size | string | default | Visual size of the picker controls |
| decrementAriaLabel | string | Decrease quantity | Accessible label for the decrement button |
| incrementAriaLabel | string | Increase quantity | Accessible label for the increment button |
| valueAriaLabel | string | (value) => `Quantity: ${value}` | Accessible label for the live quantity readout; pass a string for a fixed label or a function to include the current value |
| classNames | QuantityPickerClassNames | — | Semantic class hooks for styling the internal parts without descendant selectors Slot keys rootdecrementButtonincrementButtonvaluedecrementIconincrementIcon |
| className | string | — | No description yet. |