Skip to main content

Text Field

The Text Field component allows the user to enter and edit text.

The Text Field component is used independently or as a form component. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
namestringSpecifies the name of the component.
valueanySpecifies the value of the component.
labelnodeSecifies a label for the component.
placeholderstringDisplays placeholder text in the text field to prompt the user for specific input.
helperTextnodeDisplays helper text beneath the text field to prompt the user for specific input.
typetext
number
color
email
url
date
datetime-local
month
password
tel
time
week
string
textSpecifies the type of text input.
validationemail
url
US phone number
regular expression
string
Defines the type of text to validate.
helperErrorTextnodeIf validation is enabled, will display an error message beneath the text field if the input is invalid.
debouncenumber0Sets a delay on any events attached to the component.
disabledboolfalseIf true, the text field is disabled.
requiredboolfalseIf true, the text field must contain a value.
autofocusboolfalseIf true, autofocus is enabled.
multilineboolfalseSpecifies 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.
minRowsnumberIndicates the minimum number of rows.
maxRowsnumberIndicates the maximum number of rows.
startAdornmentcomponentDisplays an icon or typography component at the start of the text field.
endAdornmentcomponentDisplays an icon or typography component at the end of the text field.

Style Attributes

NameTypeDefaultDescription
variantfilled
outlined
standard
string
outlinedDefines the display type of the component.
colorprimary
secondary
error
info
success
warning
string
primaryDefines the color of the component.
sizesmall
medium
string
mediumDefines the size of the component.
fullWidthboolfalseIf 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

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
mediumDefines the size of the component.
viewBox0 0 25 25
Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #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

NameTypeDefaultDescription
textstringDefines the text to display in the text field.
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string
inheritSpecifies the type of typography to display.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string
inheritDefines the color of the typography.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.

For more detail on the Text Field component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.