<NumberInput> translates to an HTML <input type="number">, and converts the user input to a number.

Upon submission, the dataProvider will receive a number, not a string.


Use <NumberInput> for number values, or for string values that convert to a number. For instance, if your API expects Post records to look like this:

    "id": 123,
    "title": "Lorem Ipsum",
    "average_note": 4

Then you can use a <NumberInput> for the average_note field:

import { Edit, SimpleForm, TextInput, NumberInput, required } from 'react-admin';

export const PostEdit = () => (
            <TextInput source="title" />
            <NumberInput source="average_note" validate={[required()]} />

<NumberInput> works for integer and float values.


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 (including parse and format, which you can use to customize the string to number conversion).


You can customize the step props (which defaults to β€œany”). For instance, to restrict the value to integers, use a value of 1 for the step:

<NumberInput source="nb_views" step={1} />