NumberField

Open in Playground

A number input with minus and plus buttons. onChange receives a number (or null when the field is emptied), never a string. Arrow Up and Down step by step (Shift takes ten steps) and Home / End jump to min / max.

Typing stays free: the value is clamped to min / max and rounded to precision (by default the decimals of step) when you leave the field or use the buttons.

Minions

Between 1 and 10

Banana price

2 Minions, 9.5 per banana

error and helperText show a message under the field, showControls={false} hides the buttons, and disabled locks it. Other props such as placeholder and name go to the input.

Bananas per day

Giggle volume (steps of 10, no buttons)

Disabled

Props

labelReactNode
Label above the field.
valuenumber | null
The number, or null when empty (controlled).
defaultValuenumber | null
Default: null
Initial number when uncontrolled.
onChange(value: number | null) => void
Receives the number, or null when emptied.
minnumber
Smallest allowed value.
maxnumber
Largest allowed value.
stepnumber
Default: 1
Amount added by the buttons and arrow keys (Shift: ten steps).
precisionnumber
Decimals to round to (default: as many as step has).
showControlsboolean
Default: true
Show the minus and plus buttons.
helperTextReactNode
Hint under the field while there is no error.
errorReactNode
Message under the field; also sets the invalid style.
disabledboolean
Default: false
Lock the field and its buttons.
onBlur(event) => void
Blur handler (the value is clamped and rounded first).
onKeyDown(event) => void
Key handler; call preventDefault() to skip the built-in arrow keys.
classNamestring
Default: ''
Extra classes for the root element.
...rest
Any other props are passed to the underlying element.

NumberField props
Prop	Type	Default	Description
`label`	ReactNode	–	Label above the field.
`value`	number \| null	–	The number, or null when empty (controlled).
`defaultValue`	number \| null	`null`	Initial number when uncontrolled.
`onChange`	(value: number \| null) => void	–	Receives the number, or null when emptied.
`min`	number	–	Smallest allowed value.
`max`	number	–	Largest allowed value.
`step`	number	`1`	Amount added by the buttons and arrow keys (Shift: ten steps).
`precision`	number	–	Decimals to round to (default: as many as `step` has).
`showControls`	boolean	`true`	Show the minus and plus buttons.
`helperText`	ReactNode	–	Hint under the field while there is no `error`.
`error`	ReactNode	–	Message under the field; also sets the invalid style.
`disabled`	boolean	`false`	Lock the field and its buttons.
`onBlur`	(event) => void	–	Blur handler (the value is clamped and rounded first).
`onKeyDown`	(event) => void	–	Key handler; call `preventDefault()` to skip the built-in arrow keys.
`className`	string	`''`	Extra classes for the root element.
`...rest`		–	Any other props are passed to the underlying element.