TextField

Text fields cover baseline Material 3 input cases including supporting text, validation, adornments, and multiline entry.

TextField always uses a string model, including when type="number". Number inputs retain the native numeric keyboard, validation behavior, and textual input.value representation, while parsing the model into a numeric value remains the application's responsibility.

Field spacing belongs to the surrounding layout; preserve its intended density instead of normalizing every field group to one gap. labelClearance accepts a CSS length for local block-start clearance and can inherit a subtree default from fieldContextKey; it is additive with any parent gap. See the floating label spacing guide.

Label

Label

Supporting text

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="text-field"][data-part="root"] left_clickLMBCopy
<div>	container	[data-scope="text-field"][data-part="container"] left_clickLMBCopy
<label>	labelconditional	[data-scope="text-field"][data-part="label"] left_clickLMBCopy
<span>	content	[data-scope="text-field"][data-part="content"] left_clickLMBCopy
<span>	leadingconditional	[data-scope="text-field"][data-part="leading"] left_clickLMBCopy
<span>	prefixconditional	[data-scope="text-field"][data-part="prefix"] left_clickLMBCopy
<textarea>	inputconditional	[data-scope="text-field"][data-part="input"] left_clickLMBCopy
<span>	suffixconditional	[data-scope="text-field"][data-part="suffix"] left_clickLMBCopy
<span>	trailingconditional	[data-scope="text-field"][data-part="trailing"] left_clickLMBCopy
<fieldset>	outline	[data-scope="text-field"][data-part="outline"] left_clickLMBCopy
<div>	supportingconditional	[data-scope="text-field"][data-part="supporting"] left_clickLMBCopy

Props

Name	Description	Default	Control
labelOptional	Visible label. If omitted, provide aria-label via attrs. string | undefined	undefined
idOptional	Optional explicit id for native control element. string | undefined	undefined
typeOptional	Native input type. Date and datetime-local use DatePicker. Time uses TimePicker. string | undefined	"text"
shapeOptional	The shape of the text field. Matches Button shape sizes. roundedsquare	undefined	roundedchecksquare
labelClearanceOptional	CSS length reserved at block-start for the floating label. Overrides FieldContext. string | undefined	undefined
rowsOptional	Rows when rendered as textarea. number | undefined	3	-
supportingTextOptional	Supporting text shown below the field when not in error state. string | undefined	undefined
errorOptional	Error text shown below the field. When provided, field is invalid. string | undefined	undefined
disabledOptional	Whether the control is disabled. boolean | undefined	false
requiredOptional	Whether the control is required. boolean | undefined	false
readonlyOptional	Whether the control is readonly. boolean | undefined	false
nameOptional	Name attribute for form submissions. string | undefined	undefined
minOptional	Minimum value for compatible input types. string | undefined	undefined
maxOptional	Maximum value for compatible input types. string | undefined	undefined
placeholderOptional	Placeholder shown when value is empty. string | undefined	undefined
alwaysFloatLabelOptional	Always render the label in the floating position. boolean | undefined	false
visuallyFocusedOptional	Forces the visual focused state without requiring DOM focus. boolean | undefined	false
datePickerVariantOptional	DatePicker variant when type is date or datetime-local. DatePickerVariant | undefined	"auto"	-
timePickerVariantOptional	TimePicker variant when type is time. TimePickerVariant | undefined	"auto"	-
timePickerFormatOptional	TimePicker format when type is time. TimePickerFormat | undefined	"24h"	-
timePickerInputModeOptional	TimePicker input mode when type is time. TimePickerInputMode | undefined	undefined	-
asOptional	Render either a single-line input or multiline textarea. inputtextarea	"input"	-
sizeOptional	The field height. Matches the 32px, 40px, and 56px Button sizes. Multiline fields only support medium; TextFieldMultilineProps expresses that constraint for typed wrappers. extra-smallsmallmedium	"medium"	extra-smallsmallcheckmedium
modelValueRequired	- string	-

Events6

Name	Type	Description
update:modelValue	[value: string]	-
input	[event: Event]	-
change	[event: Event]	-
focus	[event: FocusEvent]	-
blur	[event: FocusEvent]	-
keydown	[event: KeyboardEvent]	-

Slots5

Name	Parameters	Description
leading	-	-
prefix	-	-
suffix	-	-
trailing	-	-
supporting	-	-

Styling77

Preview

Token	Description
--md-outlined-text-field-caret-colorColor Fallbackvar(--md-sys-color-primary)	Controls text field caret color.
--md-outlined-text-field-container-shapeShape Fallbackvar(--md-shape-field-square)	Controls text field container shape.
--md-outlined-text-field-disabled-input-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls text field disabled input text color.
--md-outlined-text-field-disabled-input-text-opacityDisabled Fallback0.38	Controls text field disabled input text opacity.
--md-outlined-text-field-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls text field disabled label text color.
--md-outlined-text-field-disabled-label-text-opacityDisabled Fallback0.38	Controls text field disabled label text opacity.
--md-outlined-text-field-disabled-leading-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls text field disabled leading icon color.
--md-outlined-text-field-disabled-leading-icon-opacityDisabled Fallback0.38	Controls text field disabled leading icon opacity.
--md-outlined-text-field-disabled-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls text field disabled outline color.
--md-outlined-text-field-disabled-outline-opacityDisabled Fallback0.12	Controls text field disabled outline opacity.
--md-outlined-text-field-disabled-outline-widthDisabled Fallback0.0625rem	Controls text field disabled outline width.
--md-outlined-text-field-disabled-supporting-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls text field disabled supporting text color.
--md-outlined-text-field-disabled-supporting-text-opacityDisabled Fallback0.38	Controls text field disabled supporting text opacity.
--md-outlined-text-field-disabled-trailing-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls text field disabled trailing icon color.
--md-outlined-text-field-disabled-trailing-icon-opacityDisabled Fallback0.38	Controls text field disabled trailing icon opacity.
--md-outlined-text-field-error-focus-caret-colorFocus Fallbackvar(--md-sys-color-error)	Controls text field error focus caret color.
--md-outlined-text-field-error-focus-input-text-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls text field error focus input text color.
--md-outlined-text-field-error-focus-label-text-colorFocus Fallbackvar(--md-sys-color-error)	Controls text field error focus label text color.
--md-outlined-text-field-error-focus-leading-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field error focus leading icon color.
--md-outlined-text-field-error-focus-outline-colorFocus Fallbackvar(--md-sys-color-error)	Controls text field error focus outline color.
--md-outlined-text-field-error-focus-supporting-text-colorFocus Fallbackvar(--md-sys-color-error)	Controls text field error focus supporting text color.
--md-outlined-text-field-error-focus-trailing-icon-colorFocus Fallbackvar(--md-sys-color-error)	Controls text field error focus trailing icon color.
--md-outlined-text-field-error-hover-input-text-colorState Fallbackvar(--md-sys-color-on-surface)	Controls text field error hover input text color.
--md-outlined-text-field-error-hover-label-text-colorState Fallbackvar(--md-sys-color-on-error-container)	Controls text field error hover label text color.
--md-outlined-text-field-error-hover-leading-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field error hover leading icon color.
--md-outlined-text-field-error-hover-outline-colorState Fallbackvar(--md-sys-color-on-error-container)	Controls text field error hover outline color.
--md-outlined-text-field-error-hover-supporting-text-colorState Fallbackvar(--md-sys-color-error)	Controls text field error hover supporting text color.
--md-outlined-text-field-error-hover-trailing-icon-colorState Fallbackvar(--md-sys-color-on-error-container)	Controls text field error hover trailing icon color.
--md-outlined-text-field-error-input-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls text field error input text color.
--md-outlined-text-field-error-label-text-colorColor Fallbackvar(--md-sys-color-error)	Controls text field error label text color.
--md-outlined-text-field-error-leading-icon-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field error leading icon color.
--md-outlined-text-field-error-outline-colorColor Fallbackvar(--md-sys-color-error)	Controls text field error outline color.
--md-outlined-text-field-error-supporting-text-colorColor Fallbackvar(--md-sys-color-error)	Controls text field error supporting text color.
--md-outlined-text-field-error-trailing-icon-colorColor Fallbackvar(--md-sys-color-error)	Controls text field error trailing icon color.
--md-outlined-text-field-focus-input-text-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls text field focus input text color.
--md-outlined-text-field-focus-label-text-colorFocus Fallbackvar(--md-sys-color-primary)	Controls text field focus label text color.
--md-outlined-text-field-focus-leading-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field focus leading icon color.
--md-outlined-text-field-focus-outline-colorFocus Fallbackvar(--md-sys-color-primary)	Controls text field focus outline color.
--md-outlined-text-field-focus-outline-widthFocus Fallback0.1875rem	Controls text field focus outline width.
--md-outlined-text-field-focus-supporting-text-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field focus supporting text color.
--md-outlined-text-field-focus-trailing-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field focus trailing icon color.
--md-outlined-text-field-hover-input-text-colorState Fallbackvar(--md-sys-color-on-surface)	Controls text field hover input text color.
--md-outlined-text-field-hover-label-text-colorState Fallbackvar(--md-sys-color-on-surface)	Controls text field hover label text color.
--md-outlined-text-field-hover-leading-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field hover leading icon color.
--md-outlined-text-field-hover-outline-colorState Fallbackvar(--md-sys-color-on-surface)	Controls text field hover outline color.
--md-outlined-text-field-hover-outline-widthState Fallback0.0625rem	Controls text field hover outline width.
--md-outlined-text-field-hover-supporting-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field hover supporting text color.
--md-outlined-text-field-hover-trailing-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field hover trailing icon color.
--md-outlined-text-field-input-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls text field input text color.
--md-outlined-text-field-input-text-fontTypography Fallbackvar(--md-sys-typescale-body-large-font)	Controls text field input text font.
--md-outlined-text-field-input-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-large-line-height)	Controls text field input text line height.
--md-outlined-text-field-input-text-placeholder-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field input text placeholder color.
--md-outlined-text-field-input-text-prefix-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field input text prefix color.
--md-outlined-text-field-input-text-sizeLayout Fallbackvar(--md-sys-typescale-body-large-size)	Controls text field input text size.
--md-outlined-text-field-input-text-suffix-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field input text suffix color.
--md-outlined-text-field-input-text-trackingTypography Fallbackvar(--md-sys-typescale-body-large-tracking)	Controls text field input text tracking.
--md-outlined-text-field-input-text-weightTypography Fallbackvar(--md-sys-typescale-body-large-weight)	Controls text field input text weight.
--md-outlined-text-field-label-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field label text color.
--md-outlined-text-field-label-text-fontTypography Fallbackvar(--md-sys-typescale-body-large-font)	Controls text field label text font.
--md-outlined-text-field-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-large-line-height)	Controls text field label text line height.
--md-outlined-text-field-label-text-populated-line-heightTypography Fallbackvar(--md-sys-typescale-body-small-line-height)	Controls text field label text populated line height.
--md-outlined-text-field-label-text-populated-sizeLayout Fallbackvar(--md-sys-typescale-body-small-size)	Controls text field label text populated size.
--md-outlined-text-field-label-text-sizeLayout Fallbackvar(--md-sys-typescale-body-large-size)	Controls text field label text size.
--md-outlined-text-field-label-text-trackingTypography Fallbackvar(--md-sys-typescale-body-large-tracking)	Controls text field label text tracking.
--md-outlined-text-field-label-text-weightTypography Fallbackvar(--md-sys-typescale-body-large-weight)	Controls text field label text weight.
--md-outlined-text-field-leading-icon-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field leading icon color.
--md-outlined-text-field-leading-icon-sizeLayout Fallback1.5rem	Controls text field leading icon size.
--md-outlined-text-field-outline-colorColor Fallbackvar(--md-sys-color-outline)	Controls text field outline color.
--md-outlined-text-field-outline-widthLayout Fallback0.0625rem	Controls text field outline width.
--md-outlined-text-field-supporting-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field supporting text color.
--md-outlined-text-field-supporting-text-fontTypography Fallbackvar(--md-sys-typescale-body-small-font)	Controls text field supporting text font.
--md-outlined-text-field-supporting-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-small-line-height)	Controls text field supporting text line height.
--md-outlined-text-field-supporting-text-sizeLayout Fallbackvar(--md-sys-typescale-body-small-size)	Controls text field supporting text size.
--md-outlined-text-field-supporting-text-trackingTypography Fallbackvar(--md-sys-typescale-body-small-tracking)	Controls text field supporting text tracking.
--md-outlined-text-field-supporting-text-weightTypography Fallbackvar(--md-sys-typescale-body-small-weight)	Controls text field supporting text weight.
--md-outlined-text-field-trailing-icon-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls text field trailing icon color.
--md-outlined-text-field-trailing-icon-sizeLayout Fallback1.5rem	Controls text field trailing icon size.

Examples

Sizes and toolbar alignment

Single-line fields support extra-small (32px), small (40px), and medium (56px), matching Button size names. Leading and trailing icon slots preserve those container heights. The default is medium, preserving the original 56px field. Multiline fields only support medium; their content and rows continue to determine the final height.

Prefix and suffix content uses the input typography and preserves the selected single-line height.

Place an IconButton directly in the leading or trailing slot for interactive adornments. TextField automatically sizes and aligns its touch target without changing the field height; plain icons and text remain unchanged.

searchclose

Coffeearrow_drop_down

Coffee

searchclose

Coffeearrow_drop_down

Coffee

searchclose

Coffeearrow_drop_down

Coffee

Outlined control comparison

TextField and outlined Button use the same resting outline color, size-matched outline width, square shape, and container height. TextField keeps its native floating-label notch and field-specific focus, error, and disabled states.

extra-small

TextField

TextField

small

TextField

TextField

medium

TextField

TextField

Default

Label

Label

Supporting text

Configurations

Label

Label

Supporting text

Label

Label

Error text

Labelsearch

Label

Amount$USD

Amount

LabelThis is a long input in a multi-line text field that wraps overflow text onto a new line

Label

Password Visibility

Password

Password

Toggle the checkbox below to reveal the current value.

Show password