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.

Rey

Related answer: #56122719 – Fundus

@RyanCogswell this is not related at all. You can use both Input and TextField without FormControl – Talc

Compared with Angular Material, I find the documentation for MUI just awful. A simple explanation and example would avoid so much confusion. I know MUI devs don't have as much resources as Google, but come on, these are the basics. – Talc

@Talc The answer I linked to is related in the sense that FormControl is one of the lower-level components rendered by TextField and therefore you don't need to use FormControl explicitly if you are using TextField. – Fundus

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.

Dynast

It should be "you should wrap your form controls in a FormControl" instead of just "you should wrap your [entire] form in a FormControl", right? – Hadlee

@DerekMorrison exactly, thanks for the correction. Basically, you need this when you are using native HTML form components. Otherwise, Material UI components such as TextField already contain form control components. – Dynast

What does that mean, providing context for form inputs and keeping it consistent? This sounds very abstract to me, what would be a concrete example? – Stockpile

Plumpie, The form control provides a common context that can be access by all wrapped components. see mui.com/material-ui/react-text-field/#useformcontrol for more details. In case you're unfamiliar with React context, I would recommend reading this: reactjs.org/docs/context.html [1]: mui.com/material-ui/react-text-field/#useformcontrol – Isometry

That doc is horrible – Birt