Quantity Stepper

A quantity input with rolling digits, hold-to-repeat buttons, and boundary shake.

@spectrumui/quantity-stepper

Aurora Headphones

$129.00

Tap or hold the buttons — digits roll, the price follows, boundaries shake

Installation

Usage

import { QuantityStepper } from "@/components/spectrumui/quantity-stepper"

<QuantityStepper min={1} max={10} onValueChange={(value) => console.log(value)} />

API Reference

QuantityStepper

Renders a group containing a keyboard operable spinbutton value between two step buttons. Pass value to control it from outside, or defaultValue to let it manage its own state. The value is always clamped to min and max.

Prop	Type	Default	Description
`value`	`number`	-	Controlled value. Leave undefined for uncontrolled usage
`defaultValue`	`number`	`1`	Initial value when uncontrolled
`onValueChange`	`(value: number) => void`	-	Fires with the next clamped value on every change
`min`	`number`	`0`	Lowest allowed value
`max`	`number`	`99`	Highest allowed value
`step`	`number`	`1`	Amount added or removed per press. PageUp and PageDown jump by ten steps
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the stepper
`disabled`	`boolean`	`false`	Disables pointer and keyboard interaction
`className`	`string`	-	Additional classes merged with the default pill styles

Examples

Sizes and limits

Max 5 per order