Number Stepper
An interactive type-or-step control with bounds, sizes, custom step values, and disabled states.
Number Stepper
Interactive — type or step
The central input is a real type="number" field so mobile keyboards switch to numeric. Typing is buffered locally so the user can clear the field, type a multi-digit value, or transit through the bounds while editing — only valid in-bounds integers commit live; out-of-range or partial input clamps on blur.
Value: 2
Disabled at bounds
The − / + buttons auto-disable when the current value equals min or max. The input stays interactive so the user can type any value within range.
at min (1) — decrement disabled
at max (5) — increment disabled
Sizes — sm · md · lg
Three sizes scale the buttons + input height together (32 / 40 / 48px). Matches Button and Input's size scale, so a NumberStepper drops next to other form controls without breaking the vertical rhythm.
sm
md
lg
Custom step & whole-control disabled
Pass step for non-1 increments (price ladders, batch sizes). Pass disabled to lock the entire control — useful when a parent form section is inactive.
step = 5 · range 0–50
Value: 10 · step = 5
disabled = true