NumberInput – Once UI

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}
/>

Following the value

The field follows its value prop after mount, so a number changed somewhere else (an undo, a reset, a drag on a timeline) shows up in it. There is no need to remount it with a key. It does not rewrite what the user is typing: a partial entry such as - or 1. stays as typed until it reads as a number.

size="xxs" draws a 32px field, the height of a size="s" Button. Two steppers stacked in it would get 15px each, so at this size they sit side by side, down then up.

Toolbar size

Quantity

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

<NumberInput
  id="quantity"
  label="Quantity"
  size="xxs"
  value={value}
  onChange={setValue}
  min={0}
  max={100}
/>

API reference

	Type	Default
value The current number. Controlled, like every other input here.	number	—
defaultValue	numberstring	—
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.