NumberInput

Updated: September 14, 2026

NumberInput is Input for numbers. It adds stepper controls and clamps what can be typed, so the value reaching onChange is already a number within range — no parsing, no NaN.

NumberInput

Quantity

const [value, setValue] = useState<number>(0);

const handleChange = (newValue: number) => {
  setValue(newValue);
};

<NumberInput
  id="quantity"
  label="Quantity"
  value={value}
  onChange={handleChange}
  min={0}
  max={100}
  step={1}
/>

API reference

Prop	Type	Default
value The current number. Controlled, like every other input here.	number	—
onChange Receives the number itself, not a change event.	(value: number) => void	—
min Lower bound. The decrement control stops here.	number	—
max Upper bound. The increment control stops here.	number	—
step How much each press moves the value.	number	1
padStart Pad to this many digits with leading zeros — 7 shown as 007.	number	—
…and every InputProps prop	inherited	—

Everything on Input — label, description, error, size, prefix, suffix — works here too.

Form ControlsInteractiveDetails

Form ControlsOTPInput

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club