TextField

Edit this page

TextField

The API documentation of the TextField React component.

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 properties applied to the native input, 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

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 Attributes applied to the native input element.
inputRef union: func |
 object
 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 and the input will be 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 |
 bool |
 arrayOf
 The value of the Input element, required for a controlled component.

Any other properties supplied will be spread to the root element (FormControl).

Inheritance

The properties of the FormControl component are also available. You can take advantage of this behavior to target nested components.

Demos