Skip to content
Edit this page

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 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 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 this prop 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. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
inputProps object Attributes applied to the input element.
inputRef union: func |
 object
 This prop can be used to pass a ref callback to the input element.
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 element` 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 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 enum: 'standard' |
 'outlined' |
 'filled'
 'standard' The variant to use.

The ref is forwarded to the root element.

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

CSS

You can override all the class names injected by Material-UI thanks to the classes prop. This prop accepts the following keys:

Name Description
root Styles applied to the root element.

Have a look at the overriding styles with classes section and the implementation of the component for more detail.

If using the overrides key of the theme, you need to use the following style sheet name: MuiTextField.

Inheritance

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

Notes

The component is fully StrictMode compatible.

Demos