TextField

<TextField id="filled-basic" label="Demo" />

<TextField
  id="outlined-multiline-static"
  label="Multiline"
  helperText="Simple"
  fullWidth
  multiline
  rows={3}
  displayCount
  countProps={{ className: 'display-count-class' }}
  required
  maxLength={200}
/>

() => {
  const [value, setValue] = React.useState('');
  return (
    <TextField
      id="outlined-multiline-static"
      label="Multiline"
      fullWidth
      helperText="Show count after 5 chars"
      multiline
      maxRows={5}
      displayCount={value.length > 5}
      required={false}
      maxLength={2500}
      onChange={(e) => setValue(e.target.value)}
      value={value}
    />
  );
};

<TextField
  rows={3}
  multiline
  label="Notice that when you focus the TextField, the text will shrink and truncate allowing for multiple lines of placeholder/label text. Truncation is automatically handled on focus based on this placeholder/label text length. There may be 1-3 lines visible after focus depending on the character length. Overflow is allowed before focus by design."
  fullWidth
/>

<TextField required={false} id="standard-required" label="Optional" />

<TextField disabled id="standard-disabled" label="Disabled" />

<TextField
  id="standard-password-input"
  label="Password"
  type="password"
  autoComplete="current-password"
/>

<TextField
  style={{ marginLeft: 'auto' }}
  id="standard-read-only-input"
  label="Read Only"
  defaultValue="Hello World"
  InputProps={{
    readOnly: true,
  }}
/>

<TextField
  id="standard-number"
  label="Number"
  type="number"
  InputLabelProps={{
    shrink: true,
  }}
/>

<TextField
  style={{ marginLeft: 'auto' }}
  id="standard-search"
  label="Search field"
  type="search"
/>

<TextField error id="standard-error" label="Error" defaultValue="Hello World" />

<TextField
  id="standard-helperText"
  label="Helper text"
  defaultValue="Default Value"
  helperText="Some important text"
  helperTextProps={{ className: 'helper-text-class' }}
/>

<TextField
  multiline
  label="Helper text"
  defaultValue="Default Value"
  helperText="An extremely long helper text to show the wrapping behavior for multiline helper text, especially on mobile and its separation from the `displayCount` to the right."
  displayCount
  fullWidth
/>

<TextField
  label="With normal TextField"
  id="outlined-start-adornment"
  InputProps={{
    startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
  }}
/>

() => {
  const [error, setError] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState('');

  return (
    <div>
      <div>
        <TextField
          label="Try it out"
          onBlur={() => {
            if (!error) {
              setError(true);
              setErrorMessage('Data not valid');
            } else {
              setError(false);
              setErrorMessage('');
            }
          }}
          error={error}
          helperText={errorMessage}
        />
      </div>
      <div>
        <TextField label="Another" />
      </div>
    </div>
  );
};