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 of the FormControl component are also available.

Props

Name	Type	Default	Description
autoComplete	string	-	This prop helps users to fill forms faster, especially on mobile devices.
autoFocus	bool	false	If `true`, the `input` element is focused during the first mount.
classes	object	-	Override or extend the styles applied to the component.
color	string	‘primary’	The color of the component.
defaultValue	any	-	The default value. Use when the component is not controlled.
disabled	bool	false	If `true`, the component is disabled.
error	bool	false	If `true`, the label is displayed in an error state.
FormHelperTextProps	object	-	Props applied to the `FormHelperText` element.
fullWidth	bool	false	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.
InputLabelProps	object	-	Props applied to the `InputLabel` element.
inputProps	object	-	Attributes applied to the `input` element.
InputProps	object	-	Props applied to the Input element.
inputRef	ref	-	Pass a ref to the `input` element.
label	node	-	The label content.
margin	string	‘none’	If `dense` or `normal`, will adjust vertical spacing.
maxRows	number/string	-	Maximum number of rows to display when multiline.
minRows	number/string	-	Minimum number of rows to display when multiline.
multiline	bool	false	If `true`, a `textarea` element is rendered.
name	string	-	Name attribute of the `input` element.
onChange	func	-	Callback fired when the value is changed.
placeholder	string	-	The short hint displayed in the `input`.
required	bool	false	If `true`, the label is displayed as required.
rows	number/string	-	Number of rows to display when multiline.
select	bool	false	Render a `Select` element.
SelectProps	object	-	Props applied to the `Select` element.
size	string	‘medium’	The size of the component.
slotProps	object	{}	The props used for each slot inside.
slots	object	{}	The components used for each slot inside.
sx	array/object/func	-	The system prop for defining system overrides and additional CSS styles.
type	string	-	Type of the `input` element.
value	any	-	The value of the `input` element.
variant	string	‘outlined’	The variant to use.

Inheritance

While not explicitly documented above, the props of the FormControl component are also available in TextField.

Theme Default Props

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

CSS Classes

Class Name	Description
.MuiTextField-root	Styles applied to the root element.

Source Code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.

text-field