Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 383
NearHuscarl Avatar asked Sep 05 '25 03:09

NearHuscarl


1 Answers

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.

like image 152
Dmitriif Avatar answered Sep 07 '25 21:09

Dmitriif