Set min/max on TextField type="number"?

Question

I'm using Material-UI v1.0.0-beta23 along with redux-form and redux-form-material-ui. I have a Field that is type number and I want to set the min and max values on the tag. I've tried both inputProps and min/max and neither seem to do what I want. I looked at the source code and don't see an obvious way to do this. Is it possible, and if so, how?

Here is my JSX showing things I've tried.

<Field
  name="maxNodeSelectedCount"
  component={TextField}
  label="Max Node Selected Count"
  type="number"
  inputProps={{ min: 0, max: 10 }}
  min={11}
  max={20}
  format={formatOption}
  normalize={normalizeOption}
  {...propertyFieldDefaults}
/>

Here is what the DOM looks like:

<input type="number" class="MuiInput-input-346 MuiInput-inputSingleline-349 MuiInput-inputDense-347" value="-3" name="options.maxNodeSelectedCount">

Answer 1

The redux-form Field will pass props through to the component:

All other props will be passed along to the element generated by the component prop.

The TextField has a property named InputProps which can be used to pass props to the Input component it renders. This is also true if you're using redux-form-material-ui. Its TextField is simply a wrapper for the material-ui component.

The material-ui Input component has a property named inputProps which can be used to pass props to the input element it renders.

Ok, so what do I do?

You need to pass props all the way through, from Field, to TextField, to Input, to the input element.

So if we set InputProps on Field, it will be passed to TextField, which will pass it to the Input component. If the object we pass contains an inner inputProps (intentional lowercase 'i'), the Input component will pass it to the input element.

A game of hot-proptato:

Basically, define an inputProps object within InputProps and apply it to Field:

<Field
    name="maxNodeSelectedCount"
    component={TextField}
    label="Max Node Selected Count"
    type="number"
    InputProps={{ inputProps: { min: 0, max: 10 } }}
    format={formatOption}
    normalize={normalizeOption}
    {...propertyFieldDefaults}
  />

• Field passes InputProps to TextField
• TextField passes the contents of InputProps to the Input component
• Input passed the contents of inputProps to the input element

There is a caveat with this:

The current implementation of TextField sets its own value for inputProps so that the inputClassName is applied to the input element.

By handing your own value of inputProps to TextField, you will overwrite the version applied by TextField, leaving inputClassName unset. If are using inputClassName you will need to include it in the inner inputProps object.

EDIT: I have submitted an issue and pull request to address this caveat in a future release.

Answer 2

Simply use your inputprops well

<TextField 
    type="number"
    InputProps={{
        inputProps: { 
            max: 100, min: 10 
        }
    }}
    label="what ever"
/>

notice the upper and lower case in the inputprops

credit to Ken Gregory

Answer 3

You can use inputProps to apply any attributes to the native input element, including min and max.

<TextField type="number" inputProps={{ min: 4, max: 10 }} />

Please note that the min/max attributes do not prevent the user from typing invalid values in the TextField. To restrict what the user can type, you can validate the value by adding onChange handler like below:

const min = 0;
const max = 10;

export default function BasicTextFields() {
  const [value, setValue] = useState<number>();

  return (
    <div>
      <TextField
        type="number"
        inputProps={{ min, max }}
        value={value}
        onChange={(e) => {
          var value = parseInt(e.target.value, 10);

          if (value > max) value = max;
          if (value < min) value = min;

          setValue(value);
        }}
      />
    </div>
  );
}

Answer 4

Put type inside InputProps:

      <Field
        name="number"
        label="Number"
        component={TextField}
        InputProps={{
          inputProps: {
            type: 'number',
            min: 0, max: 25,
          },
        }}
      />

Answer 5

The other answers didn't work for me.

Material UI has a section for 3rd party integration here

It really does the job of writing only numbers and not allowing negatives.

import NumberFormat from 'react-number-format';

function NumberFormatCustom(props) {
    const { inputRef, onChange, ...other } = props;
    
     return (
            <NumberFormat
                {...other}
                getInputRef={inputRef}
                allowNegative={false}
                onValueChange={(values) => {
                    onChange({
                        target: {
                            name: props.name,
                            value: values.value,
                        },
                    });
                }}
                isNumericString
            />
        );
}
    
<TextField
    label="react-number-format"
    value={values.numberformat}
    onChange={handleChange}
    name="numberformat"
    id="formatted-numberformat-input"
    InputProps={{
          inputComponent: NumberFormatCustom,
     }}
/>

Answer 6

This will definitely work

handleMobileNumber = (e) => {
 if (e.target.value.split("").length <= 10) {
  this.setState({
    mobileNumber: e.target.value,
  });
 }
};

<TextField
  label="Enter Mobile Number"
   variant="outlined"
   value={this.state.mobileNumber}
   onChange={this.handleMobileNumber}
   type="number"
/>

Answer 7

I had the same issue, in my case I wanted to prevent the user from adding very big or minus numbers in a MUI Textfield used for minutes or hours inputs.

My solution is the following:
In the MUI TextField

  <TextField                                                            
    type={'number'}
    helperText={'minutes'}
    defaultValue={minutes}
    onChange={(e) => { checkMinutesValidity(e) }}
  />

In the checkMinutesValidity function

  const checkMinutesValidity = (event) => {
    if(event.target.value > 59){
      event.target.value = 59;
    }
    if(event.target.value < 0){
      event.target.value = 0;
    }
}

Hope it helps.

Answer 8

If you are using rect hook form you can validate things like so:

import {Controller } from 'react-hook-form'
import {
  Box,
  TextField,
  FormHelperText,
  FormControl,

} from '@mui/material'
...
const {
  handleSubmit,
  control,
  formState: { errors },
} = useForm({})
...
<Box mt={2}>
  <Controller
    name="weight"
    control={control}
    rules={{
      required: 'Veuillez choisir une réponse',
      validate: {
        weight: (value) =>
          value < 1 || value > 5
            ? 'Le poids doit etre entre 1 et 5'
            : undefined,
      },
    }}
    render={({ field: { onChange, value } }) => (
      <FormControl fullWidth>
        <TextField
          type="number"
          value={value}
          onChange={onChange}
          label="Poids"
          name="weight"
        />
      </FormControl>
    )}
  />
  <FormHelperText error={Boolean(errors.weight)}>
    {errors.weight?.message}
  </FormHelperText>
</Box>

Answer 9

<TextField
            label="Username"
            id="outlined-start-adornment"
            variant="outlined"
            inputProps={{minlength:5, maxLength: 20}}
          />