How to build forms with material ui in react correctly

13
votes

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?

2
reactjsmaterial-ui
There are examples in Material UI documentation on where these may be used and why. – curiousdev
Thanks for your answer. Unfortunately, there are no comments accompanying the examples. That's why it's difficult to understand the why and how. Also, the examples are not consistent. – siva
Have you read descriptions for each of these in the "Components API" section? Some of the components you've mentioned are for nicer, consistent layout and styling. Some apply styles and positioning (and other css) to the original html elements e.g. <label>. Try them out in a sandbox while looking at the examples. – curiousdev
See stackoverflow.com/questions/56122219/… – Ryan Cogswell
The problem with material ui is that it is not not clear how to arrange elements in a form correctly. What took me 15 minutes in bootstrap takes me several days in materual ui – ACV

2 Answers

2
votes

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.

0
votes

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.