siva
siva

Reputation: 1513

How to build forms with material ui in react correctly

I am confused about the different form components in material ui.

There are six components which are relevant to forms which do not include specific input fields:
- FormControl
- FormLabel
- FormControlLabel
- FormGroup
- InputLabel
- FormHelperText

When you look at their examples Signin and Signup a plain html form tag is added on top.

Could someone explain when to use what component to build forms correctly?

Upvotes: 17

Views: 14860

Answers (2)

FluffyRidz
FluffyRidz

Reputation: 139

I recently found this [codesanbox]: https://codesandbox.io/s/9ywq085k9w which serves as a good example of form consisting of most used input field types. It also has a validation method included in it.

Upvotes: -1

LucSedirae
LucSedirae

Reputation: 157

The M-UI docs can be difficult to parse through at first. If you go to the demo section of the API for inputs/form in the docs, you can click on the expand code icon <> and see the expanded version of their code for better context.

For simple forms you can use a basic HTML/JSX form tag and set your onSubmit prop there and have the M-UI component TextField as your inputs inside of the enveloping form tags. You can then target name/value properties for each TextField.

That will let you get comfortable with the API for TextField which is the most basic of the M-UI input components. From there it will become more apparent when you need to reach for components like FormControls and labels.

Upvotes: 2

Related Questions