<NumberInput>
<NumberInput> translates to an HTML <input type="number">, and converts the user input to a number.
import { NumberInput } from 'react-admin';
<NumberInput source="nb_views" />
<NumberInput> converts the input value to a number (integer or float) on blur. This is because if the input updates the form value on every keystroke, it will prevent users from entering certain float values. For instance, to enter the number 1.02, a user would type 1.0, that JavaScript converts to the number 1.
If you need the form value to update on change instead of on blur (for instance to update another input based on the number input value), you can build your own number input using <TextInput>, and the format and parse props. But be aware that this only works for integer values.
Properties
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
max |
Optional | number |
’’ | The maximum value to accept for this input |
min |
Optional | number |
’’ | The minimum value to accept for this input |
step |
Optional | number |
any |
A stepping interval to use when using up and down arrows to adjust the value, as well as for validation |
<NumberInput> also accepts the common input props.
Usage
You can customize the step props (which defaults to “any”). For instance, to restrict the value to integers, ise a value of 1 for the step:
<NumberInput source="nb_views" step={1} />