Skip to content
Edit this page

TextField API

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

Import 

import TextField from '@material-ui/core/TextField';
// or
import { TextField } from '@material-ui/core';

You can learn more about the difference by reading this guide.

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 props applied to the input element, 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 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 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.
defaultValue any The default value of the input element.
disabled bool If true, the input element will be disabled.
error bool If true, the label will be displayed in an error state.
FormHelperTextProps object Props 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 this prop to make label and helperText accessible for screen readers.
InputLabelProps object Props applied to the InputLabel element.
InputProps object Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
inputProps object Attributes applied to the input element.
inputRef ref Pass a ref to the input element.
label node The label content.
margin '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 (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 string
| number		 Number of rows to display when multiline option is set to true.
rowsMax 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 Props applied to the Select element.
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.
variant 'standard'
| 'outlined'
| 'filled'		 'standard' The variant to use.

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (FormControl).

CSS

  • Style sheet name: MuiTextField.
  • Style sheet details:
Rule name Global class Description
root .MuiTextField-root Styles applied to the root element.

You can override the style of the component thanks to one of these customization points:

If that's not sufficient, you can check the implementation of the component for more detail.

Inheritance

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

Demos