Skip to content

TextField API

API reference docs for the React TextField component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import TextField from '@mui/material/TextField';
// or
import { TextField } from '@mui/material';
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:

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

Props of the FormControl component are also available.

autoComplete
autoFocus
classes
color
defaultValue
disabled
error
FormHelperTextProps
fullWidth
helperText
id
InputLabelProps
inputProps
InputProps
inputRef
label
margin
maxRows
minRows
multiline
name
onChange
placeholder
required
rows
select
SelectProps
size
sx
type
value
variant
The ref is forwarded to the root element.

Inheritance

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

Theme default props

You can use MuiTextField to change the default props of this component with the theme.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiTextField-root

You can override the style of the component using one of these customization options: