The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.
It follows the WAI-ARIA authoring practices for the Spinbutton widget.
Chakra UI exports 5 components for the NumberInput.
NumberInput: The wrapper that provides context and logic to the components.
NumberInputStepper: The wrapper for the input's stepper buttons.
NumberIncrementStepper: The button to increment the value of the input.
NumberDecrementStepper: The button to decrement the value of the input.
NumberInput is composed of smaller components to give you control of the
styling of each part.
min prop or
max prop to set an upper and lower limit for the input.
By default, the input will restrict the value to stay within the specified
step prop to change the step size when you increment or decrement the
value. By default, the value is rounded to match the number of decimals in the
In some cases, you might need the value to be rounded to specific decimal
points. Simply pass the
precision prop and set it to the number of decimal
In most cases, users can type custom values in the input field. If the typed
value is greater than the
max, the value is reset to
max when the user blur
out of the input.
To disable this behavior, pass
clampValueOnBlur and set to
In this example, try to type a value greater than the max. It won't reset the value on blur.
In some scenarios, you might not want to block out of range values. Pass the
clampValueOnBlur props and set them to
support this use case.
The NumberInput will be set
trueinternally when the value is out of range. Out of range means that the
valueis great than
maxor less than
Input component, you can pass the
size prop to change the size of
You can change the style of any part of the components using style props. You can also change the icons used in the steppers.
A common use case is to combine the
NumberInput with a
Slider. Here's an
example of how to do that:
Sometimes, you might need to create a mobile version of the number input. Here's
how you can leverage the
useNumberInput hook to build one.
spinbuttonto denote that users are to select from a range of discrete values using an up and down arrows on the keyboard.
aria-valueminset to the minimum value allowed for the spinbutton.
aria-valuemaxset to the maximum value allowed for the spinbutton. attribute should be applied to the spinbutton.
aria-valuenowset to the current value of the
trueto make them invisible to screen readers.
10 * step.
Flex with some additional props listed below.
|The value of the input for controlled usage. Should be less than |
|The initial value of the input. Should be less than |
|The callback fired when the value changes|
|The maximum value of the input|
|The minimum value of the input|
|The step used to increment or decrement the value|
|The number of decimal points used to round the value|
|It is used to set the |
Input so you can pass all
Flex so you can pass all
NumberDecrementStepper and NumberIncrementStepper composes the
Box props so
you can pass all