What is FormControl used for? Why is it used? How Should it be used?

Question

Can someone explain to me in layman's terms what function FormControl serves, and why/how one would want to use it?

I'm using Material-UI in React, and many of the form examples I see make use of FormControl, but I'm having a hard time understanding what it does, and if it's necessary or not for my project.

Right now I simply have a Component named Form.js and I'm containing all my form elements in a div like this:

return ( <div>   <FormControl className={classes.formControl}>     <InputLabel htmlFor="select-multiple-accounts">Account</InputLabel>     <Select       multiple       value={accountName}       onChange={handleAccountChange}       input={<Input id="select-multiple-accounts" />}       renderValue={         selected => (         <div className={classes.chips}>           {             selected.map(value => (             <Chip key={value} label={value} className={classes.chip} />           ))}         </div>       )}       MenuProps={MenuProps}     >       {accountNames.map(name => (         <MenuItem key={name.label} value={name.label} style={getStyles(name.label, accountName, theme)}>           {name.label}         </MenuItem>       ))}     </Select>   </FormControl>   <br /><br />   <TextField     id="job-number"     label="Job #"     className={classes.textField}     value={props.jobNumber}     onChange={handleJobNumberChange}     fullWidth   />   <br /><br /><br />   <TextField     id="project-description"     label="Project Description"     placeholder="Provide a detailed description of the project:"     className={classes.textField}     multiline     variant="outlined"     value={props.projectDescription}     onChange={handleProjectDescriptionChange}     fullWidth   /> </div>   ); } 

Is this ok? or am I supposed to be wrapping everything in a FormControl? If so.. can you please explain why? I'm not sure what the best practices are when coding a form into a React web application. I'm new to React Forms.

Thanks.

Answer 1

From the official Material UI Documentation FormControl API:

Provides context such as filled/focused/error/required for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl. This context is used by the following components:

• FormLabel
• FormHelperText
• Input
• InputLabel

So if you want to use the mentioned features, you should wrap your form in a FormControl component.