17

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

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
NearHuscarl
  • 66,950
  • 18
  • 261
  • 230

1 Answers1

31

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.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Dmitriif
  • 2,020
  • 9
  • 20
  • 2
    Nice answer, thanks for the explanation! – Jeremy Feb 23 '22 at 11:13
  • 12
    jesus christ, why isn't this just in the docs. so much crap like this in MUI. I wish I wasn't forced to use it – ortonomy Mar 23 '22 at 14:58
  • @ortonomy what would you prefer to use? – Gibron Aug 22 '22 at 19:29
  • You will not be able to use both. `No duplicate props allowed react/jsx-no-duplicate-props ` – Vikas Dec 06 '22 at 17:26
  • 2
    @Vikas, I regularly use both without issue. There must be something wrong with your setup. Javascript is case sensitive, so `inputProps` and `InputProps` are not duplicates. Note that one has a capital letter at the beginning. – Dave Jan 03 '23 at 23:36