TextField API
API reference docs for the React TextField component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import TextField from '@mui/material/TextField';
// or
import { TextField } from '@mui/material';
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.
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.
Type:string
Override or extend the styles applied to the component.
See CSS API below for more details.
Type:object
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
Type:'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string
Default:'primary'
The id of the input
element. Use this prop to make label
and helperText
accessible for screen readers.
Type:string
Props applied to the InputLabel
element. Pointer events like onClick
are enabled if and only if shrink
is true
.
Type:object
Props applied to the Input element. It will be a FilledInput
, OutlinedInput
or Input
component depending on the variant
prop value.
Type:object
If dense
or normal
, will adjust vertical spacing of this and contained components.
Type:'dense'
| 'none'
| 'normal'
Default:'none'
Callback fired when the value is changed.
Type:func
function(event: object) => void
event
The event source of the callback. You can pull out the new value by accessingevent.target.value
(string).
If true
, the label is displayed as required and the input
element is required.
Type:bool
Default: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.
Type:bool
Default:false
The system prop that allows defining system overrides as well as additional CSS styles.
See the `sx` page for more details.
Type:Array<func
| object
| bool>
| func
| object
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.
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.