TextField

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

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
asOptional	Render either a single-line input or multiline textarea. inputtextarea	"input"	-
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	"square"	roundedchecksquare
rowsOptional	Rows when rendered as textarea. number | undefined	3	-
descriptionOptional	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	-
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

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