Stepwise UI

Quantity Input

A compact +/− stepper for cart quantities, numeric settings, or any bounded integer. The count animates on change. Minus is disabled at min, plus at max.

Installation

npx stepwise-ui add qty-input

Default

1

1 item in cart

import { QtyInput } from '@/components/stepwise/qty-input'

const [qty, setQty] = useState(1)

<QtyInput value={qty} onChange={setQty} min={1} max={99} />

States

1
min=1, max=10
5
step=5
3
disabled
<QtyInput defaultValue={1} min={1} max={10} />
<QtyInput defaultValue={5} step={5} />
<QtyInput defaultValue={3} disabled />

Props

PropTypeDescription
value
number
Controlled value.
defaultValue
number
Uncontrolled initial value. Default 1.
onChange
(value: number) => void
Fires on each step.
min
number
Minimum allowed value. Default 0.
max
number
Maximum allowed value. Default ∞.
step
number
Increment/decrement amount. Default 1.
disabled
boolean
Disables all controls.