TextField API

The API documentation of the TextField React component. Learn more about the properties and the CSS customization points.

import TextField from '@material-ui/core/TextField';

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.

Advanced Configuration

It's important to understand that the text field is a simple abstraction on top of the following components:

If you wish to alter the properties applied to the native input, you can do so as follows:

const inputProps = {
  step: 300,
};

return <TextField id="time" type="time" inputProps={inputProps} />;

For advanced cases, please look at the source of TextField by clicking on the "Edit this page" button above. Consider either:

using the upper case props for passing values directly to the components
using the underlying components directly as shown in the demos

Props

Name	Type	Default	Description
autoComplete	string		This property 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 here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
autoFocus	bool		If `true`, the input will be focused during the first mount.
defaultValue	union: string \| number		The default value of the `Input` element.
disabled	bool		If `true`, the input will be disabled.
error	bool		If `true`, the label will be displayed in an error state.
FormHelperTextProps	object		Properties applied to the `FormHelperText` element.
fullWidth	bool		If `true`, the input will take up the full width of its container.
helperText	node		The helper text content.
id	string		The id of the `input` element. Use that property to make `label` and `helperText` accessible for screen readers.
InputLabelProps	object		Properties applied to the `InputLabel` element.
InputProps	object		Properties applied to the `Input` element.
inputProps	object		Attributes applied to the native `input` element.
inputRef	union: func \| object		Use that property to pass a ref callback to the native input component.
label	node		The label content.
margin	enum: 'none' \| 'dense' \| 'normal'		If `dense` or `normal`, will adjust vertical spacing of this and contained components.
multiline	bool		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`.
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 will be required.
rows	union: string \| number		Number of rows to display when multiline option is set to true.
rowsMax	union: string \| number		Maximum number of rows to display when multiline option is set to true.
select	bool	false	Render a `Select` element while passing the `Input` element to `Select` as `input` parameter. If this option is set you must pass the options of the select as children.
SelectProps	object		Properties applied to the `Select` element.
type	string		Type attribute of the `Input` element. It should be a valid HTML5 input type.
value	union: string \| number \| bool \| arrayOf		The value of the `Input` element, required for a controlled component.
variant	enum: 'standard' \| 'outlined' \| 'filled'	'standard'	The variant to use.

Any other properties supplied will be spread to the root element (FormControl).

Inheritance

The properties of the FormControl component are also available. You can take advantage of this behavior to target nested components.

TextField API

Advanced Configuration

Props

Inheritance

Demos