Form

Quantity Picker

Stepper input for product quantity with increment / decrement buttons and direct keyboard entry.

Loading playground

Overview

QuantityPicker is the quantity stepper used in the buybox and cart. It offers two ways to set a value: increment / decrement buttons for small adjustments, and direct keyboard entry for larger jumps (typing 12 is faster than tapping + twelve times). The component defaults to 1 and clamps to minimumValue / maximumValue (bind those to stock when you know it). Use incrementValue for bulk stepping (e.g. case packs of 6).

Set withDeleteButton to swap the decrement icon to a trash icon once the value reaches the minimum, and listen for @delete to remove the line item entirely. That's the cart "remove last item" affordance.

Key Business & UX Benefits

Direct keyboard entry alongside +/- buttons removes friction for B2B and bulk buyers, who can grow average order value without rage-tapping the increment button.
maximumValue tied to live stock stops customers from ordering quantities you can't fulfil, which protects the post-purchase experience and reduces refund volume.
withDeleteButton plus the @delete event turns the cart row's quantity control into the line-item remove control too, so customers don't hunt for a separate "remove" button.
incrementValue covers case-pack and bulk-order workflows in one component, so B2B and DTC storefronts share the same stepper.

Pro-Tip from Larry: Bind maximumValue to available stock so the picker physically prevents customers from ordering more than inventory allows, and listen for @delete to remove the line item when the user clicks decrement at the minimum.

Feature List

Two entry modes: increment/decrement buttons for small bumps and direct keyboard entry for fast bulk jumps
`minimumValue` and `maximumValue` clamp the value, so binding `maximumValue` to live stock physically prevents over-ordering
`incrementValue` lets case-pack and bulk workflows step in 6s or 12s instead of 1s, covering B2B and DTC from one stepper
`withDeleteButton` swaps the decrement icon to a trash icon when the value reaches `minimumValue`
`@delete` event lets the same control double as the cart row's remove affordance, so customers don't hunt for a separate button
Default value of 1 keeps drop-in cart and buybox use trivial, no setup required

API Reference

Prop	Default	Type
`size`	`m`	`"s" \| "m"`
`minimumValue`	`1`	`number`
`maximumValue`	`Infinity`	`number`
`incrementValue`	`1`	`number`
`withDeleteButton`	`false`	`boolean`
`id`		`string`
`disabled`	`false`	`boolean`
`readonly`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`
`modelValue`		`number`

Event	Type
`delete`	`(event: "delete"): void`
`update:modelValue`	`(event: "update:modelValue", value: number): void`

Edit this pageorReport an issue

Pagination

Page navigation control with arrows or numbered jumps for splitting large data sets.

Select

Dropdown select for choosing a single option from a predefined list.