Text Fields

Text fields allow users to enter and edit text.

Recommended Use

The TextField wrapper component is a complete form control including a label, input and help text.

<Grid container spacing={2} component="form" noValidate autoComplete="off">
  <Grid item md={6} xl={4}>
    <TextField variant="outlined" id="standard-name" label="Standard" margin="normal" />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-uncontrolled"
      label="Standard"
      defaultValue="default value"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      required
      id="standard-required"
      label="Required"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      error
      id="standard-error"
      label="Error"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      disabled
      id="standard-disabled"
      label="Disabled"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-password-input"
      label="Password"
      type="password"
      autoComplete="current-password"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-read-only-input"
      label="Read Only"
      defaultValue="Hello World"
      margin="normal"
      InputProps={{
        readOnly: true,
      }}
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField variant="outlined" id="standard-dense" label="Dense" margin="dense" />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-multiline-flexible"
      label="Multiline"
      multiline
      rowsMax="4"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-multiline-static"
      label="Multiline"
      multiline
      rows="4"
      defaultValue="Default Value"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-helperText"
      label="Helper text"
      defaultValue="Default Value"
      helperText="Some important text"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-with-placeholder"
      label="With placeholder"
      placeholder="Placeholder"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-textarea"
      label="With placeholder multiline"
      placeholder="Placeholder"
      multiline
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-number"
      label="Number"
      type="number"
      InputLabelProps={{
        shrink: true,
      }}
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-search"
      label="Search field"
      type="search"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-full-width"
      label="Label"
      style={{ margin: 8 }}
      placeholder="Placeholder"
      helperText="Full width!"
      fullWidth
      margin="normal"
      InputLabelProps={{
        shrink: true,
      }}
    />
  </Grid>
</Grid>

<Grid container spacing={2} component="form" noValidate autoComplete="off">
  <Grid item md={6} xl={4}>
    <TextField variant="outlined" id="standard-name" label="Standard" margin="normal" />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-uncontrolled"
      label="Standard"
      defaultValue="default value"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      required
      id="standard-required"
      label="Required"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      error
      id="standard-error"
      label="Error"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      disabled
      id="standard-disabled"
      label="Disabled"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-password-input"
      label="Password"
      type="password"
      autoComplete="current-password"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-read-only-input"
      label="Read Only"
      defaultValue="Hello World"
      margin="normal"
      InputProps={{
        readOnly: true,
      }}
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField variant="outlined" id="standard-dense" label="Dense" margin="dense" />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-multiline-flexible"
      label="Multiline"
      multiline
      rowsMax="4"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-multiline-static"
      label="Multiline"
      multiline
      rows="4"
      defaultValue="Default Value"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-helperText"
      label="Helper text"
      defaultValue="Default Value"
      helperText="Some important text"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-with-placeholder"
      label="With placeholder"
      placeholder="Placeholder"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-textarea"
      label="With placeholder multiline"
      placeholder="Placeholder"
      multiline
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-number"
      label="Number"
      type="number"
      InputLabelProps={{
        shrink: true,
      }}
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-search"
      label="Search field"
      type="search"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="outlined"
      id="standard-full-width"
      label="Label"
      style={{ margin: 8 }}
      placeholder="Placeholder"
      helperText="Full width!"
      fullWidth
      margin="normal"
      InputLabelProps={{
        shrink: true,
      }}
    />
  </Grid>
</Grid>

Filled Variation

Unifi also recommends a filled variation to improve scan-ability on more complex data entry forms and task-based user interfaces.

<Grid container spacing={2} component="form" noValidate autoComplete="off">
  <Grid item md={6} xl={4}>
    <TextField variant="filled" id="filled-name" label="Standard" margin="normal" />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-uncontrolled"
      label="Standard"
      defaultValue="default value"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      required
      id="filled-required"
      label="Required"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      error
      id="filled-error"
      label="Error"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      disabled
      id="filled-disabled"
      label="Disabled"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-password-input"
      label="Password"
      type="password"
      autoComplete="current-password"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-read-only-input"
      label="Read Only"
      defaultValue="Hello World"
      margin="normal"
      InputProps={{
        readOnly: true,
      }}
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField variant="filled" id="filled-dense" label="Dense" margin="dense" />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-multiline-flexible"
      label="Multiline"
      multiline
      rowsMax="4"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-multiline-static"
      label="Multiline"
      multiline
      rows="4"
      defaultValue="Default Value"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-helperText"
      label="Helper text"
      defaultValue="Default Value"
      helperText="Some important text"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-with-placeholder"
      label="With placeholder"
      placeholder="Placeholder"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-textarea"
      label="With placeholder multiline"
      placeholder="Placeholder"
      multiline
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-number"
      label="Number"
      type="number"
      InputLabelProps={{
        shrink: true,
      }}
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-search"
      label="Search field"
      type="search"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-full-width"
      label="Label"
      style={{ margin: 8 }}
      placeholder="Placeholder"
      helperText="Full width!"
      fullWidth
      margin="normal"
      InputLabelProps={{
        shrink: true,
      }}
    />
  </Grid>
</Grid>

<Grid container spacing={2} component="form" noValidate autoComplete="off">
  <Grid item md={6} xl={4}>
    <TextField variant="filled" id="filled-name" label="Standard" margin="normal" />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-uncontrolled"
      label="Standard"
      defaultValue="default value"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      required
      id="filled-required"
      label="Required"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      error
      id="filled-error"
      label="Error"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      disabled
      id="filled-disabled"
      label="Disabled"
      defaultValue="Hello World"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-password-input"
      label="Password"
      type="password"
      autoComplete="current-password"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-read-only-input"
      label="Read Only"
      defaultValue="Hello World"
      margin="normal"
      InputProps={{
        readOnly: true,
      }}
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField variant="filled" id="filled-dense" label="Dense" margin="dense" />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-multiline-flexible"
      label="Multiline"
      multiline
      rowsMax="4"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-multiline-static"
      label="Multiline"
      multiline
      rows="4"
      defaultValue="Default Value"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-helperText"
      label="Helper text"
      defaultValue="Default Value"
      helperText="Some important text"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-with-placeholder"
      label="With placeholder"
      placeholder="Placeholder"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-textarea"
      label="With placeholder multiline"
      placeholder="Placeholder"
      multiline
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-number"
      label="Number"
      type="number"
      InputLabelProps={{
        shrink: true,
      }}
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-search"
      label="Search field"
      type="search"
      margin="normal"
    />
  </Grid>
  <Grid item md={6} xl={4}>
    <TextField
      variant="filled"
      id="filled-full-width"
      label="Label"
      style={{ margin: 8 }}
      placeholder="Placeholder"
      helperText="Full width!"
      fullWidth
      margin="normal"
      InputLabelProps={{
        shrink: true,
      }}
    />
  </Grid>
</Grid>

Components

The TextField is composed of smaller components ( FormControl, Input, FilledInput, InputLabel, OutlinedInput, and FormHelperText ) that you can leverage directly to significantly customize your form inputs.

You might also have noticed that some native HTML input properties are missing from the TextField component. This is on purpose. The component takes care of the most used properties, then it's up to the user to use the underlying component shown in the following demo. Still, you can use inputProps (and InputProps, InputLabelProps properties) if you want to avoid some boilerplate.

<Grid container spacing={2} component="form" noValidate autoComplete="off">
  <Grid item md={6}>
    <FormControl>
      <InputLabel htmlFor="component-simple">Name</InputLabel>
      <Input id="component-simple" />
    </FormControl>
  </Grid>
  <Grid item md={6}>
    <FormControl variant="outlined" style={{ marginRight: '16px' }}>
      <InputLabel htmlFor="component-helper">Name</InputLabel>
      <OutlinedInput
        id="component-helper"
        labelWidth={55}
        inputProps={{
          'aria-describedby': 'component-helper-text',
        }}
      />
      <FormHelperText id="component-helper-text">Some important helper text</FormHelperText>
    </FormControl>
  </Grid>
  <Grid item md={6}>
    <FormControl variant="outlined">
      <InputLabel htmlFor="component-placeholder">Placeholder</InputLabel>
      <OutlinedInput labelWidth={100} id="component-placeholder" placeholder="Placeholder" />
    </FormControl>
  </Grid>
  <Grid item md={6}>
    <FormControl variant="outlined">
      <InputLabel htmlFor="component-disabled">Name</InputLabel>
      <OutlinedInput
        disabled
        id="component-disabled"
        inputProps={{
          'aria-describedby': 'component-disabled-helper-text',
        }}
      />
      <FormHelperText id="component-disabled-helper-text">Disabled</FormHelperText>
    </FormControl>
  </Grid>
  <Grid item md={6}>
    <FormControl
      variant="outlined"
      error
      aria-describedby="component-error-text"
      style={{ marginRight: '16px' }}
    >
      <InputLabel htmlFor="component-error">Name</InputLabel>
      <OutlinedInput
        id="component-error"
        labelWidth={55}
        inputProps={{
          'aria-describedby': 'component-error-helper-text',
        }}
      />
      <FormHelperText id="component-error-helper-text">Error</FormHelperText>
    </FormControl>
  </Grid>
</Grid>

<Grid container spacing={2} component="form" noValidate autoComplete="off">
  <Grid item md={6}>
    <FormControl>
      <InputLabel htmlFor="component-simple">Name</InputLabel>
      <Input id="component-simple" />
    </FormControl>
  </Grid>
  <Grid item md={6}>
    <FormControl variant="outlined" style={{ marginRight: '16px' }}>
      <InputLabel htmlFor="component-helper">Name</InputLabel>
      <OutlinedInput
        id="component-helper"
        labelWidth={55}
        inputProps={{
          'aria-describedby': 'component-helper-text',
        }}
      />
      <FormHelperText id="component-helper-text">Some important helper text</FormHelperText>
    </FormControl>
  </Grid>
  <Grid item md={6}>
    <FormControl variant="outlined">
      <InputLabel htmlFor="component-placeholder">Placeholder</InputLabel>
      <OutlinedInput labelWidth={100} id="component-placeholder" placeholder="Placeholder" />
    </FormControl>
  </Grid>
  <Grid item md={6}>
    <FormControl variant="outlined">
      <InputLabel htmlFor="component-disabled">Name</InputLabel>
      <OutlinedInput
        disabled
        id="component-disabled"
        inputProps={{
          'aria-describedby': 'component-disabled-helper-text',
        }}
      />
      <FormHelperText id="component-disabled-helper-text">Disabled</FormHelperText>
    </FormControl>
  </Grid>
  <Grid item md={6}>
    <FormControl
      variant="outlined"
      error
      aria-describedby="component-error-text"
      style={{ marginRight: '16px' }}
    >
      <InputLabel htmlFor="component-error">Name</InputLabel>
      <OutlinedInput
        id="component-error"
        labelWidth={55}
        inputProps={{
          'aria-describedby': 'component-error-helper-text',
        }}
      />
      <FormHelperText id="component-error-helper-text">Error</FormHelperText>
    </FormControl>
  </Grid>
</Grid>

Input Adornments

An Input allows the provision of InputAdornment. These can be used to add a prefix, a suffix or an action to an input. For instance, you can use an icon button to hide or reveal the password.

() => {
  const [values, setValues] = React.useState({
    amount: '',
    password: '',
    weight: '',
    weightRange: '',
  });
  const [showPassword, setPasswordVisibility] = React.useState(false);

  const handleChange = (e, name) => {
    setValues({ ...values, [name]: e.target.value });
  };

  const ranges = [
    {
      value: '0-20',
      label: '0 to 20',
    },
    {
      value: '21-50',
      label: '21 to 50',
    },
    {
      value: '51-100',
      label: '51 to 100',
    },
  ];

  return (
    <Grid container spacing={2} component="form" noValidate autoComplete="off">
      <Grid item md={6}>
        <TextField
          variant="outlined"
          label="With normal TextField"
          id="simple-start-adornment"
          InputProps={{
            startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
          }}
          inputProps={{
            'aria-label': 'Weight (in kilograms)',
          }}
        />
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          select
          fullWidth
          label="With Select"
          value={values['weightRange']}
          onChange={(event) => handleChange(event, 'weightRange')}
          InputProps={{
            startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
          }}
          SelectProps={{
            SelectDisplayProps: {
              'aria-label': 'Weight (in kilograms)',
            },
          }}
        >
          {ranges.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          id="adornment-amount"
          label="Amount"
          value={values['amount']}
          onChange={(e) => handleChange(e, 'amount')}
          InputProps={{
            startAdornment: <InputAdornment position="start">$</InputAdornment>,
          }}
          inputProps={{
            'aria-label': 'Amount (in dollars)',
          }}
        />
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          id="adornment-weight"
          label="Weight"
          value={values['weight']}
          onChange={(event) => handleChange(event, 'weight')}
          InputProps={{
            endAdornment: <InputAdornment position="end">Kg</InputAdornment>,
          }}
          inputProps={{
            'aria-label': 'Weight (in kilograms)',
            'aria-describedby': 'weight-helper-text',
          }}
        />
        <FormHelperText id="weight-helper-text">Weight</FormHelperText>
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          id="adornment-password"
          type={showPassword ? 'text' : 'password'}
          label="Password"
          value={values['password']}
          onChange={(event) => handleChange(event, 'password')}
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <IconButton
                  aria-label="Toggle password visibility"
                  aria-pressed={showPassword}
                  onClick={() => setPasswordVisibility(!showPassword)}
                >
                  {showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
            ),
          }}
        />
      </Grid>
    </Grid>
  );
};

() => {
  const [values, setValues] = React.useState({
    amount: '',
    password: '',
    weight: '',
    weightRange: '',
  });
  const [showPassword, setPasswordVisibility] = React.useState(false);

  const handleChange = (e, name) => {
    setValues({ ...values, [name]: e.target.value });
  };

  const ranges = [
    {
      value: '0-20',
      label: '0 to 20',
    },
    {
      value: '21-50',
      label: '21 to 50',
    },
    {
      value: '51-100',
      label: '51 to 100',
    },
  ];

  return (
    <Grid container spacing={2} component="form" noValidate autoComplete="off">
      <Grid item md={6}>
        <TextField
          variant="outlined"
          label="With normal TextField"
          id="simple-start-adornment"
          InputProps={{
            startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
          }}
          inputProps={{
            'aria-label': 'Weight (in kilograms)',
          }}
        />
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          select
          fullWidth
          label="With Select"
          value={values['weightRange']}
          onChange={(event) => handleChange(event, 'weightRange')}
          InputProps={{
            startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
          }}
          SelectProps={{
            SelectDisplayProps: {
              'aria-label': 'Weight (in kilograms)',
            },
          }}
        >
          {ranges.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          id="adornment-amount"
          label="Amount"
          value={values['amount']}
          onChange={(e) => handleChange(e, 'amount')}
          InputProps={{
            startAdornment: <InputAdornment position="start">$</InputAdornment>,
          }}
          inputProps={{
            'aria-label': 'Amount (in dollars)',
          }}
        />
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          id="adornment-weight"
          label="Weight"
          value={values['weight']}
          onChange={(event) => handleChange(event, 'weight')}
          InputProps={{
            endAdornment: <InputAdornment position="end">Kg</InputAdornment>,
          }}
          inputProps={{
            'aria-label': 'Weight (in kilograms)',
            'aria-describedby': 'weight-helper-text',
          }}
        />
        <FormHelperText id="weight-helper-text">Weight</FormHelperText>
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          id="adornment-password"
          type={showPassword ? 'text' : 'password'}
          label="Password"
          value={values['password']}
          onChange={(event) => handleChange(event, 'password')}
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <IconButton
                  aria-label="Toggle password visibility"
                  aria-pressed={showPassword}
                  onClick={() => setPasswordVisibility(!showPassword)}
                >
                  {showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
            ),
          }}
        />
      </Grid>
    </Grid>
  );
};

With icon

Icons can be specified as prepended or appended.

    <Grid container spacing={2} component="form" noValidate autoComplete="off">
      <Grid item md={6}>
        <TextField
          variant="outlined"
          label="With a start adornment"
          id="input-with-icon-adornment"
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <Person />
              </InputAdornment>
            ),
          }}
        />
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          id="input-with-icon-textfield"
          label="TextField"
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <Person />
              </InputAdornment>
            ),
          }}
          inputProps={{ 'aria-label': 'Textfield (with icon)' }}
        />
      </Grid>
      <Grid item md={6}>
        <Grid container spacing={1} alignItems="flex-end">
          <Grid item>
            <Person />
          </Grid>
          <Grid item xs={10}>
            <TextField id="input-with-icon-grid" label="With a grid" />
          </Grid>
        </Grid>
      </Grid>
    </Grid>

    <Grid container spacing={2} component="form" noValidate autoComplete="off">
      <Grid item md={6}>
        <TextField
          variant="outlined"
          label="With a start adornment"
          id="input-with-icon-adornment"
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <Person />
              </InputAdornment>
            ),
          }}
        />
      </Grid>
      <Grid item md={6}>
        <TextField
          variant="outlined"
          id="input-with-icon-textfield"
          label="TextField"
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <Person />
              </InputAdornment>
            ),
          }}
          inputProps={{ 'aria-label': 'Textfield (with icon)' }}
        />
      </Grid>
      <Grid item md={6}>
        <Grid container spacing={1} alignItems="flex-end">
          <Grid item>
            <Person />
          </Grid>
          <Grid item xs={10}>
            <TextField id="input-with-icon-grid" label="With a grid" />
          </Grid>
        </Grid>
      </Grid>
    </Grid>

Layout

Both TextField and FormControl allow the specification of margin to alter the vertical spacing of inputs. Using none (default) will not apply margins to the FormControl, whereas dense and normal will as well as alter other styles to meet the specification.

<Grid container spacing={2} component="form" noValidate autoComplete="off">
  <Grid item md={6} xl={3}>
    <TextField
      variant="outlined"
      label="None"
      id="margin-none"
      defaultValue="Default Value"
      helperText="Some important text"
    />
  </Grid>
  <Grid item md={6} xl={3}>
    <TextField
      variant="outlined"
      label="Dense"
      id="margin-dense"
      defaultValue="Default Value"
      helperText="Some important text"
      margin="dense"
    />
  </Grid>
  <Grid item md={6} xl={3}>
    <TextField
      variant="outlined"
      label="Normal"
      id="margin-normal"
      defaultValue="Default Value"
      helperText="Some important text"
      margin="normal"
    />
  </Grid>
</Grid>

<Grid container spacing={2} component="form" noValidate autoComplete="off">
  <Grid item md={6} xl={3}>
    <TextField
      variant="outlined"
      label="None"
      id="margin-none"
      defaultValue="Default Value"
      helperText="Some important text"
    />
  </Grid>
  <Grid item md={6} xl={3}>
    <TextField
      variant="outlined"
      label="Dense"
      id="margin-dense"
      defaultValue="Default Value"
      helperText="Some important text"
      margin="dense"
    />
  </Grid>
  <Grid item md={6} xl={3}>
    <TextField
      variant="outlined"
      label="Normal"
      id="margin-normal"
      defaultValue="Default Value"
      helperText="Some important text"
      margin="normal"
    />
  </Grid>
</Grid>

Limitations

The input label "shrink" state isn't always correct. The input label is supposed to shrink as soon as the input is displaying something. In some circumstances, we can't determine the "shrink" state (number input, datetime input, Stripe input, dynamically generated field). You might notice an overlap, such as with an adornment.

To workaround the issue, you can force the "shrink" state of the label, such as:

<TextField InputLabelProps={{ shrink: true }} />

<InputLabel shrink>Count</InputLabel>

Text Fields

Recommended Use

Filled Variation

Components

Input Adornments

With icon

Layout

Limitations

Properties

<TextField />

<FormControl />

<FormHelperText />

<Input />

<InputAdornment />

<InputBase />

<InputLabel />