In Material-ui when do we use Input vs. Textfield for building a form?

raghuvd picture raghuvd · May 14, 2019 · Viewed 8k times · Source

Maybe this is just a basic question, but so far have not found any reasonable explanation. I am a beginner in react and using material-ui very recently. I am not very clear on when to use an Input vs. Textfield for building a form?

Looking at documentation, it feels like TextField is a superset of what Input can do, but not sure. Material-ui site uses examples for text field and input both, without stating benefits of one over the other and any use cases.

Please suggest.

Answer

Ryan Cogswell picture Ryan Cogswell · May 14, 2019

For most use cases, you should use TextField rather than the lower-level components that it delegates to (such as Input).

The relevant part of the documentation is here: https://material-ui.com/demos/text-fields/#components.

Particularly this line:

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

The main reason to use these lower-level components is if you need to customize your form input in some way that isn't supported using TextField.