Number Input
A field for numbers. The buttons and the arrow keys step the value, and it
stays within min and max.
General
Name the field with aria-label, or with a label passed as children.
Step and precision
step sets how much each click or arrow adds. The value keeps the decimal places of step, or the ones set in precision.
Without controls
Hide the buttons with hideControls. The arrow keys still step the value.
Error
Show a message with error and errorMessage. Say what happened and how to fix it.
Controlled
onChange receives the number, or null when the field is empty.
Disabled and read only
APIs
NumberInput.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | the number, to control the field | number / null | - | - |
| initialValue | the number at the start | number / null | - | null |
| onChange | called with the number, or null when the field is empty | (value: number | null) => void | - | - |
| min | lowest value | number | - | - |
| max | highest value | number | - | - |
| step | how much a button or an arrow key adds | number | - | 1 |
| precision | decimal places kept | number | - | the ones of step |
| type | color of the field | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | default |
| hideControls | hide the buttons | boolean | - | false |
| error | mark the value as invalid | boolean | - | false |
| errorMessage | text shown below the field with error | string | - | - |
| disabled | disable the field | boolean | - | false |
| readOnly | show the value without letting it change | boolean | - | false |
| children | label shown above the field | ReactNode | - | - |
| ... | native props, passed to the input | InputHTMLAttributes | 'aria-label', 'name', 'placeholder', ... | - |
Typing and limits
The field accepts digits, a minus sign and one decimal separator, a dot or a comma. While the user types, onChange receives the number as it is. When the field loses the focus, the value is kept within min and max and rounded to precision. The buttons and the keys never go past the limits.
Ref
The ref points at the input.
Accessibility
The input has role="spinbutton" with aria-valuenow, aria-valuemin and aria-valuemax. The buttons are named Increase and Decrease and stay out of the tab order, since the keys do the same from the input. With error, the input has aria-invalid and is described by the message.
| Key | Action |
|---|---|
| Arrow Up and Down | Add or subtract step |
| Page Up and Down | Add or subtract ten steps |
| Home and End | Go to min or max, when set |