Form
Quantity Picker
A stepper input for selecting product quantities with increment/decrement buttons, direct input, and stock validation.
Overview
Enables customers to select product quantity before adding to cart with dual-input approach accommodating different user preferences. Default value of 1 aligns with typical single-item purchase patterns while supporting multi-quantity bulk orders when needed.
Key Business & UX Benefits
- Lets users change quantity with buttons or direct input.
- Min/max and stock validation prevent invalid quantities.
- Clear increment/decrement keeps the control familiar and accessible.
- Fits buybox and cart for single and bulk orders.
Pro-Tip from Larry: Set max to stock so users can’t add more than available.
Usage
QuantityPicker
<QuantityPicker />
Feature List
- Increment and decrement buttons
- Direct number input via text field
- Stock limit validation
- Minimum and maximum value constraints
API Reference
| Prop | Default | Type |
|---|---|---|
size | default | "default" | "small" |
minimumValue | 1 | number |
maximumValue | Infinity | number |
incrementValue | 1 | number |
withDeleteButton | false | boolean |
id | string | |
disabled | false | boolean |
modelValue | number |
| Event | Type |
|---|---|
delete | (event: "delete"): void |
update:modelValue | (event: "update:modelValue", value: number): void |