46

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.

Cmaxster
  • 1,035
  • 2
  • 11
  • 18
  • Related answer: https://stackoverflow.com/questions/56122219/in-material-ui-when-do-we-use-input-vs-textfield-for-building-a-form/56135272#56135272 – Ryan Cogswell Oct 01 '19 at 15:51
  • @RyanCogswell this is not related at all. You can use both Input and TextField without FormControl – Phil Dec 12 '20 at 20:30
  • 4
    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. – Phil Dec 12 '20 at 20:32
  • 2
    @Phil 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`. – Ryan Cogswell Dec 12 '20 at 20:37

1 Answers1

13

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.

4l12
  • 322
  • 2
  • 10
  • 5
    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? – Derek Morrison Feb 28 '21 at 00:05
  • 5
    @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. – 4l12 Mar 01 '21 at 14:24
  • 4
    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? – Plumpie Mar 29 '22 at 18:38
  • 1
    Plumpie, The form control provides a common context that can be access by all wrapped components. see https://mui.com/material-ui/react-text-field/#useformcontrol for more details. In case you're unfamiliar with React context, I would recommend reading this: https://reactjs.org/docs/context.html [1]: https://mui.com/material-ui/react-text-field/#useformcontrol – Gal Zohar Jun 15 '22 at 08:56
  • 1
    That doc is horrible – Gustavo Maximo Jul 27 '23 at 16:18