Reputation: 1513
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
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
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