---
filename: /packages/material-ui/src/TextField/TextField.js
---
# TextField
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](/api/form-control)
- [InputLabel](/api/input-label)
- [Input](/api/input)
- [FormHelperText](/api/form-helper-text)
If you wish to alter the properties applied to the native input, you can do as follow:
```jsx
const inputProps = {
step: 300,
};
return ;
```
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 direct to the components.
- using the underlying components directly as shown in the demos.
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| autoComplete | string | | This property 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 here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill |
| autoFocus | bool | | If `true`, the input will be focused during the first mount. |
| defaultValue | union: string |
number
| | The default value of the `Input` element. |
| disabled | bool | | If `true`, the input will be disabled. |
| error | bool | | If `true`, the label will be displayed in an error state. |
| FormHelperTextProps | object | | Properties applied to the `FormHelperText` element. |
| fullWidth | bool | | 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. Use that property to make `label` and `helperText` accessible for screen readers. |
| InputLabelProps | object | | Properties applied to the `InputLabel` element. |
| InputProps | object | | Properties applied to the `Input` element. |
| inputProps | object | | Properties applied to the native `input` element. |
| inputRef | func | | Use that property to pass a ref callback to the native input component. |
| label | node | | The label content. |
| margin | enum: 'none' |
'dense' |
'normal'
| | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
| multiline | bool | | If `true`, a textarea element will be rendered instead of an input. |
| name | string | | Name attribute of the `input` element. |
| onChange | func | | Callback 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`. |
| placeholder | string | | The short hint displayed in the input before the user enters a value. |
| required | bool | false | If `true`, the label is displayed as required. |
| rows | union: string |
number
| | Number of rows to display when multiline option is set to true. |
| rowsMax | union: string |
number
| | Maximum number of rows to display when multiline option is set to true. |
| select | bool | 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. |
| SelectProps | object | | Properties applied to the `Select` element. |
| type | string | | Type attribute of the `Input` element. It should be a valid HTML5 input type. |
| value | union: string |
number |
arrayOf
| | The value of the `Input` element, required for a controlled component. |
Any other properties supplied will be spread to the root element ([FormControl](/api/form-control)).
## Inheritance
The properties of the [FormControl](/api/form-control) component are also available.
You can take advantage of this behavior to [target nested components](/guides/api#spread).
## Demos
- [Autocomplete](/demos/autocomplete)
- [Pickers](/demos/pickers)
- [Text Fields](/demos/text-fields)