TextField

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:

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.
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).

Inheritance

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

Demos