Search code examples
reactjsmaterial-uitextfield

inputProps vs InputProps in Material UI TextField

What are the differences between inputProps and InputProps? The 2 TextFields below do the same thing. When do I have to choose one over the other?

<TextField
  label="inputProps"
  inputProps={{
    name: 'inputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>

<TextField
  label="InputProps"
  InputProps={{
    name: 'InputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>

Codesandbox Demo

Solution

  • InputProps applies to Input react-component since:

    TextField is composed of smaller components ( FormControl, Input, FilledInput, InputLabel, OutlinedInput, and FormHelperText ) that you can leverage directly to significantly customize your form inputs.

    inputProps applies to what will be input DOM-element and it gets all of its attributes.

    Therefore, if it's necessary to change something that has to do with an input being a React component (eg. set an Icon) we should use InputProps. For all other changes which aren't controlled by Input component properties there's a variety of input attributes.