Skip to main content
Text fields let users enter and edit text.

​
Import

import TextField from '@mui/material/TextField';

​
Basic Usage

import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function BasicTextFields() {
  return (
    <Box
      component="form"
      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
      noValidate
      autoComplete="off"
    >
      <TextField id="outlined-basic" label="Outlined" variant="outlined" />
      <TextField id="filled-basic" label="Filled" variant="filled" />
      <TextField id="standard-basic" label="Standard" variant="standard" />
    </Box>
  );
}

​
Props

​
variant
'outlined' | 'standard' | 'filled'
default:"'outlined'"
The variant to use.
​
value
unknown
The value of the input element, required for a controlled component.
​
defaultValue
unknown
The default value. Use when the component is not controlled.
​
label
ReactNode
The label content.
​
placeholder
string
The short hint displayed in the input before the user enters a value.
​
type
string
Type of the input element. It should be a valid HTML5 input type.
​
color
'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
default:"'primary'"
The color of the component. Supports both default and custom theme colors.
​
size
'small' | 'medium'
default:"'medium'"
The size of the component.
​
disabled
boolean
default:"false"
If true, the component is disabled.
​
error
boolean
default:"false"
If true, the label is displayed in an error state.
​
required
boolean
default:"false"
If true, the label is displayed as required and the input element is required.
​
fullWidth
boolean
default:"false"
If true, the input will take up the full width of its container.
​
multiline
boolean
default:"false"
If true, a textarea element is rendered instead of an input.
​
rows
string | number
Number of rows to display when multiline option is set to true.
​
maxRows
string | number
Maximum number of rows to display when multiline option is set to true.
​
minRows
string | number
Minimum number of rows to display when multiline option is set to true.
​
helperText
ReactNode
The helper text content.
​
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.
​
autoFocus
boolean
default:"false"
If true, the input element is focused during the first mount.
​
select
boolean
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.
​
onChange
(event: React.ChangeEvent<HTMLInputElement>) => void
Callback fired when the value is changed. You can pull out the new value by accessing event.target.value (string).
​
onBlur
(event: React.FocusEvent<HTMLInputElement>) => void
Callback fired when the input loses focus.
​
onFocus
(event: React.FocusEvent<HTMLInputElement>) => void
Callback fired when the input receives focus.
​
inputRef
React.Ref<any>
Pass a ref to the input element.
​
sx
SxProps<Theme>
The system prop that allows defining system overrides as well as additional CSS styles.

​
API Reference

Build docs developers (and LLMs) love

Get started for freeTalk to us