TextField

Text fields let users enter and edit text.

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

Props

Prop	Type	Default	Description
autoComplete	string		This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it following the specification.
autoFocus	bool	false	If true, the input element will be focused during the first mount.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'primary' \| 'secondary'	'primary'	The color of the component. It supports those theme colors that make sense for this component.
defaultValue	any		The default value of the input element.
disabled	bool	false	If true, the input element will be disabled.
displayCount	bool	false	If true, the count of characters will be displayed. The error state will be triggered if the count exceeds maxLength
countProps	Partial<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>		Props for the count span, only visible when displayCount is true
error	bool	false	If true, the label will be displayed in an error state.
FormHelperTextProps	object		Props applied to the FormHelperText element.
fullWidth	bool	false	If true, the input will take up the full width of its container.
helperText	node		The helper text content.
helperTextProps	Partial<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>		Props for the count span, only visible when helperText has a value
id	string		The id of the input element. Use this prop to make label and helperText accessible for screen readers.
InputLabelProps	object		Props applied to the InputLabel element.
inputProps	object		Attributes applied to the input element.
InputProps	object		Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
inputRef	ref		Pass a ref to the input element.
label	node		The label content.
margin	'dense' \| 'none' \| 'normal'		If dense or normal, will adjust vertical spacing of this and contained components.
maxLength	number	500	When displayCount is true this will be the maximum length allowed and displayed before an error is triggered
multiline	bool	false	If true, a textarea element will be rendered instead of an input.
name	string		Name attribute of the input element.
onChange	func		Callback fired when the value is changed. Signature: function(event: object) => void event: The event source of the callback. You can pull out the new value by accessing event.target.value (string).
placeholder	string		The short hint displayed in the input before the user enters a value.
required	bool	false	If true, the label is displayed as required and the input element` will be required.
rows	number \| string		Number of rows to display when multiline option is set to true.
maxRows	number \| string		Maximum number of rows to display when multiline option is set to true.
size	'medium' \| 'small'		The size of the text field.
type	string		Type of the input element. It should be a valid HTML5 input type.
value	any		The value of the input element, required for a controlled component.

NOTE: InputProps can be found here

Examples

Multiline

<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
/>

Optional

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

Disabled

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

Password

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

Read Only

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

Number

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

Search

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

Error

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

With Helper Text

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

With Multiline Helper Text and Display Count

<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
/>

With Input Adornment

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