Text Field
The Text Field component allows the user to enter and edit text. It is used independently or as a form component within a Form Block.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Specifies the name of the component (form component only). | |
| value | any | Specifies the value of the component. | |
| label | node | Secifies a label for the component. | |
| placeholder | string | Displays placeholder text in the text field to prompt the user for specific input. | |
| helperText | node | Displays helper text beneath the text field to prompt the user for specific input. | |
| type | text number color url date datetime-local month password tel time week string | text | Specifies the type of text input. |
| validation | email url US phone number regular expression string | Defines the type of text to validate. | |
| helperErrorText | node | If validation is enabled, will display an error message beneath the text field if the input is invalid. | |
| debounce | number | 0 | Sets a delay on any events attached to the component. |
| disabled | bool | false | If true, the text field is disabled. |
| required | bool | false | If true, the text field must contain a value. |
| autofocus | bool | false | If true, autofocus is enabled. |
| multiline | bool | false | Specifies whether the text field contains multiple lines. If enabled, the input field changes to a text area field and will stretch to match the size of its content unless the Min and Max rows are set. |
| minRows | number | Indicates the minimum number of rows. | |
| maxRows | number | Indicates the maximum number of rows. | |
| startAdornment | component | Displays an icon or typography component at the start of the text field. | |
| endAdornment | component | Displays an icon or typography component at the end of the text field. |
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| variant | filled outlined standard string | outlined | Defines the display type of the component. |
| color | primary secondary error info success warning string | primary | Defines the color of the component. |
| size | small medium string | medium | Defines the size of the component. |
| fullWidth | bool | false | If true, the text field takes up the full width of its container. |
Subcomponents
The Text Field component has two subcomponents that allow an icon or typography to be placed as an adornment at the start or end of the text field.
Icon
Specifies an icon to use at the start or end of a text field.
For further details, see the Icon component.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| color | inherit primary secondary action disabled error string | inherit | Defines the color of the icon. |
| size | inherit small medium large | medium | Defines the size of the component. |
| viewBox | 0 0 25 25 | Defines the size of the view box that displays the icon. | |
| fill | hex #ffffff rgb 5,5,5 | The fill color of the icon. | |
| stroke | hex #ffffff rgb 5,5,5 | The stroke color of the icon. |
Typography
Specifies typography to use at the start or end of a text field.
For further details, see the Typography component.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | Defines the text to display in the text field. | |
| variant | h1 h2 h3 h4 h5 h6 subtitle1 subtitle2 body1 body2 caption button overline inherit string | inherit | Specifies the type of typography to display. |
| color | initial inherit primary secondary textPrimary textSecondary error string | inherit | Defines the color of the typography. |
| gutterBottom | bool | false | Enables a gutter at the bottom of the typography component. |
For more detail on the Text Field component, see the MUI developer docs.