Component has internal state to manage user input, when blur event is triggered
internal value is clamped with given min and max values and
onChange handler is called with result.
For example, if you put
-20 in age input in next example, values will be clamped on blur:
123 -> 120,
-20 -> 0.
If you want to disable this behavior set
formatter props you can customize how value is displayed in the input:
Min and max values define upper and lower value which may be entered. When user clicks controls or presses up/down arrows, value is incremented/decremented by step:
stepHoldInterval props to define behavior when increment/decrement controls are clicked and hold,
this will also overwrite default up and down arrows behavior:
To use decimal steps set following props:
step– decimal number, e.g.
precision– amount of significant digits
To change decimal separator set
Controls are not rendered in these cases:
hideControlsprop is set to true
- Input is disabled
variantprop is set to unstyled
NumberInput exposes increment/decrement functions with
You can use it to create custom controls:
Controls to increment/decrement value are not displayed when input is disabled:
NumberInput renders regular input with
Increment/decrement controls have
aria-hidden attribute and cannot be focused
– users with keyboard can increment/decrement value by step with up/down arrows.
aria-label in case you use component without label for screen reader support: