text-field
v4.9.10arrow_drop_downThis 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.
If true
, the input
element will be focused during the first mount.
The color of the component. It supports those theme colors that make sense for this component.
The default value of the input
element.
If true
, the input
element will be disabled.
If true
, the label will be displayed in an error state.
Props applied to the FormHelperText
element.
If true
, the input will take up the full width of its container.
The helper text content.
The id of the input
element.
Use this prop to make label
and helperText
accessible for screen readers.
Props applied to the InputLabel
element.
Pass a ref to the input
element.
The label content.
If dense
or normal
, will adjust vertical spacing of this and contained components.
If true
, a textarea element will be rendered instead of an input.
Name attribute of the input
element.
The short hint displayed in the input before the user enters a value.
If true
, the label is displayed as required and the input
element` will be required.
Number of rows to display when multiline option is set to true.
Maximum number of rows to display when multiline option is set to true.
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.
Props applied to the Select
element.
The size of the text field.
Type of the input
element. It should be a valid HTML5 input type.
The value of the input
element, required for a controlled component.
Callback fired when the value is changed.
The variant to use.
Props applied to the Input element.
It will be a FilledInput
,
OutlinedInput
or Input
component depending on the variant
prop value.
Attributes applied to the input
element.
Callback fired when the value is changed.
The variant to use.
Props applied to the Input element.
It will be a FilledInput
,
OutlinedInput
or Input
component depending on the variant
prop value.
Attributes applied to the input
element.
Callback fired when the value is changed.
The variant to use.
Props applied to the Input element.
It will be a FilledInput
,
OutlinedInput
or Input
component depending on the variant
prop value.
Attributes applied to the input
element.
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 Demos:
API:
- TextField API
- inherits FormControl API
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
Name | Type | Description |
---|---|---|
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. You can learn more about it following the specification. |
autoFocus | bool | If |
children | node | |
classes | object | Override or extend the styles applied to the component. See CSS API below for more details. |
className | string | |
color | 'primary' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
defaultValue | any | The default value of the |
disabled | bool | If |
error | bool | If |
FormHelperTextProps | object | Props applied to the |
fullWidth | bool | If |
helperText | node | The helper text content. |
hiddenLabel | bool | |
id | string | The id of the |
InputLabelProps | object | Props applied to the |
inputProps | object | Attributes applied to the |
InputProps | object | Props applied to the Input element.
It will be a |
inputRef | custom | Pass a ref to the |
label | node | The label content. |
margin | 'dense' | 'none' | 'normal' | If |
multiline | bool | If |
name | string | Name attribute of the |
onBlur | function | |
onChange | function | The event source of the callback.
You can pull out the new value by accessing |
onFocus | function | |
placeholder | string | The short hint displayed in the input before the user enters a value. |
required | bool | If |
rows | number | string | Number of rows to display when multiline option is set to true. |
rowsMax | number | string | Maximum number of rows to display when multiline option is set to true. |
select | bool | Render a |
SelectProps | object | Props applied to the |
size | 'medium' | 'small' | The size of the text field. |
type | string | Type of the |
value | any | The value of the |
variant | 'filled' | 'outlined' | 'standard' | The variant to use. |