Skip to content

TextField API

API documentation for the React TextField component. Learn about the available props, and the CSS API.

Import

import TextField from '@material-ui/core/TextField';
// or
import { TextField } from '@material-ui/core';
You can learn about the difference by reading this guide on minimizing bundle size.

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: - FormControl - InputLabel - FilledInput - OutlinedInput - Input - FormHelperText If you wish to alter the props applied to the input element, you can do so as follows: jsx 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

Component name

The name MuiTextField can be used when providing default props or style overrides in the theme.

Props

NameTypeDefaultDescription
autoCompletestringThis 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.
autoFocusboolfalseIf true, the input element is focused during the first mount.
classesobjectOverride 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.
defaultValueanyThe default value. Use when the component is not controlled.
disabledboolfalseIf true, the component is disabled.
errorboolfalseIf true, the label is displayed in an error state.
FormHelperTextPropsobjectProps applied to the FormHelperText element.
fullWidthboolfalseIf true, the input will take up the full width of its container.
helperTextnodeThe helper text content.
idstringThe id of the input element. Use this prop to make label and helperText accessible for screen readers.
InputLabelPropsobjectProps applied to the InputLabel element.
inputPropsobjectAttributes applied to the input element.
InputPropsobjectProps applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
inputRefrefPass a ref to the input element.
labelnodeThe label content.
margin'dense'
| 'none'
| 'normal'
If dense or normal, will adjust vertical spacing of this and contained components.
maxRowsnumber
| string
Maximum number of rows to display when multiline option is set to true.
minRowsnumber
| string
Minimum number of rows to display when multiline option is set to true.
multilineboolfalseIf true, a textarea element is rendered instead of an input.
namestringName attribute of the input element.
onChangefuncCallback 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).
placeholderstringThe short hint displayed in the input before the user enters a value.
requiredboolfalseIf true, the label is displayed as required and the input element is required.
rowsnumber
| string
Number of rows to display when multiline option is set to true.
selectboolfalseRender 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.
SelectPropsobjectProps applied to the Select element.
size'medium'
| 'small'
The size of the component.
typestringType of the input element. It should be a valid HTML5 input type.
valueanyThe value of the input element, required for a controlled component.
variant'filled'
| 'outlined'
| 'standard'
'outlined'The variant to use.

The ref is forwarded to the root element.
Any other props supplied will be provided to the root element (FormControl).

Inheritance

While not explicitly documented above, the props of the FormControl component are also available on TextField. You can take advantage of this to target nested components.

CSS

Rule nameGlobal classDescription
root.MuiTextField-rootStyles applied to the root element.

You can override the style of the component using one of these customization options: If that isn't sufficient, you can check the implementation of the component for more detail.

Demos