Inputs

Text field

The foundation of every form: a labelled single-line input with filled and outlined surfaces, leading and trailing slots, helper text, and error states connected to the theme.

Work email

We only use it to send the invite

Password

At least 8 characters

Search projects

City

This city is not supported yet

Playground

Configure the complete public surface and copy synchronized kebab-case markup.

Work email

We only use it to send the invite

Properties

Label

Names the field

Field label

Variant

Filled or outlined surface

Type

Native input type

Icon slot

Leading or trailing glyph

Helper text

Supporting guidance under the field

Helper text

State

Interactive state flags

RequiredErrorDisabledRead only

Vue

<m-text-field
  v-model="value"
  label="Work email"
  helper-text="We only use it to send the invite"
>
  <template #prepend>
    <m-icon name="ic:round-mail-outline" />
  </template>
</m-text-field>

Token map

Inspect how the field's component tokens map onto system tokens across variants and states.

Search tokens

MTextField · All91 tokens

md-text-field

md-field-container-gapg($t, 'container.gap')

Resolved value4rem

md-field-container-padding-inlineg($t, 'container.padding.inline')

Resolved value16rem

md-field-container-padding-prependg($t, 'container.padding.prepend')

Resolved value12rem

md-field-container-padding-appendg($t, 'container.padding.append')

Resolved value12rem

md-field-container-field-gapg($t, 'container.field.gap')

Resolved value8rem

md-field-label-leftg($t, 'label.left')

Resolved value16rem

md-field-label-prepend-leftg($t, 'label.prepend.left')

Resolved value52rem

md-field-label-prepend-notch-shiftg($t, 'label.prepend.notch.shift')

Resolved valuecalc(var(--ui-text-field-inset) - 52rem)

md-field-helper-padding-inlineg($t, 'helper.padding.inline')

Resolved value16rem

md-field-helper-margin-topg($t, 'helper.margin.top')

Resolved value4rem

md-text-field-density-compact-input-padding-topg($t, 'density.compact.input.padding.top')

Resolved value18rem

md-text-field-density-compact-input-padding-bottomg($t, 'density.compact.input.padding.bottom')

Resolved value4rem

md-text-field-density-default-input-padding-topg($t, 'density.default.input.padding.top')

Resolved value24rem

md-text-field-density-default-input-padding-bottomg($t, 'density.default.input.padding.bottom')

Resolved value8rem

md-text-field-density-comfortable-input-padding-topg($t, 'density.comfortable.input.padding.top')

Resolved value28rem

md-text-field-density-comfortable-input-padding-bottomg($t, 'density.comfortable.input.padding.bottom')

Resolved value10rem

md-text-field-outlined-insetg($t, 'outlined.inset')

Resolved valuemax(16rem, min(var(--ui-text-field-radius), var(--ui-text-field-height) / 2) + 4rem)

md-text-field-outlined-outline-insetg($t, 'outlined.outline.inset')

Resolved value-1rem

md-text-field-outlined-outline-padding-startg($t, 'outlined.outline.padding.start')

Resolved valuecalc(var(--ui-text-field-inset) - 5rem)

md-text-field-outlined-notch-padding-inlineg($t, 'outlined.notch.padding.inline')

Resolved value4rem

md-field-container-border-widthg($t, 'container.border.width')

Resolved value1rem

md-field-container-field-input-min-widthg($t, 'container.field.input-min-width')

Resolved value60rem

md-field-label-max-widthg($t, 'label.max-width')

Resolved valuecalc(100% - 32rem)

md-field-helper-min-heightg($t, 'helper.min-height')

Resolved value18rem

md-text-field-density-compact-heightg($t, 'density.compact.height')

Resolved value44rem

md-text-field-density-compact-label-topg($t, 'density.compact.label.top')

Resolved value22rem

md-text-field-density-compact-label-raiseg($t, 'density.compact.label.raise')

Resolved value14rem

md-text-field-density-compact-label-transform-insideg($t, 'density.compact.label.transform.inside')

Resolved valuetranslateY(calc(-50% - 14rem)) scale(0.75)

md-text-field-density-compact-label-transform-notchg($t, 'density.compact.label.transform.notch')

Resolved valuetranslateY(calc(-50% - 22rem)) scale(0.75)

md-text-field-density-default-heightg($t, 'density.default.height')

Resolved value56rem

md-text-field-density-default-label-topg($t, 'density.default.label.top')

Resolved value28rem

md-text-field-density-default-label-raiseg($t, 'density.default.label.raise')

Resolved value18rem

md-text-field-density-default-label-transform-insideg($t, 'density.default.label.transform.inside')

Resolved valuetranslateY(calc(-50% - 18rem)) scale(0.75)

md-text-field-density-default-label-transform-notchg($t, 'density.default.label.transform.notch')

Resolved valuetranslateY(calc(-50% - 28rem)) scale(0.75)

md-text-field-density-comfortable-heightg($t, 'density.comfortable.height')

Resolved value64rem

md-text-field-density-comfortable-label-topg($t, 'density.comfortable.label.top')

Resolved value32rem

md-text-field-density-comfortable-label-raiseg($t, 'density.comfortable.label.raise')

Resolved value20rem

md-text-field-density-comfortable-label-transform-insideg($t, 'density.comfortable.label.transform.inside')

Resolved valuetranslateY(calc(-50% - 20rem)) scale(0.75)

md-text-field-density-comfortable-label-transform-notchg($t, 'density.comfortable.label.transform.notch')

Resolved valuetranslateY(calc(-50% - 32rem)) scale(0.75)

md-text-field-outlined-bgg($t, 'outlined.bg')

Resolved valuetransparent

md-text-field-outlined-notch-font-sizeg($t, 'outlined.notch.font-size')

Resolved valuecalc(var(--md-sys-typescale-body-large-size) * 0.75)

md-text-field-rounded-sharpg($t, 'rounded.sharp')

System token--sys-shape-corner-none

md-text-field-rounded-smallg($t, 'rounded.small')

System token--sys-shape-corner-extra-small

md-text-field-rounded-mediumg($t, 'rounded.medium')

System token--sys-shape-corner-medium

md-text-field-rounded-largeg($t, 'rounded.large')

System token--sys-shape-corner-large

md-text-field-rounded-pillg($t, 'rounded.pill')

System token--sys-shape-corner-full

md-field-label-colorg($t, 'label.color')

System token--md-sys-color-on-surface-variant

md-field-input-colorg($t, 'input.color')

System token--md-sys-color-on-surface

md-field-icon-colorg($t, 'icon.color')

System token--md-sys-color-on-surface-variant

md-field-helper-colorg($t, 'helper.color')

System token--md-sys-color-on-surface-variant

md-text-field-filled-bgg($t, 'filled.bg')

System token--md-sys-color-surface-container-highest

md-text-field-filled-border-bottom-colorg($t, 'filled.border.bottom.color')

System token--md-sys-color-on-surface-variant

md-text-field-outlined-border-colorg($t, 'outlined.border.color')

System token--md-sys-color-outline

md-text-field-filled-hover-bgg($t, 'filled.hover.bg')

System token--md-sys-color-on-surface

md-text-field-filled-hover-border-bottom-colorg($t, 'filled.hover.border.bottom.color')

System token--md-sys-color-on-surface

md-text-field-filled-focused-bgg($t, 'filled.focused.bg')

System token--md-sys-color-surface-container-highest

md-text-field-filled-focused-border-bottom-colorg($t, 'filled.focused.border.bottom.color')

System token--md-sys-color-primary

md-text-field-filled-focused-label-colorg($t, 'filled.focused.label.color')

System token--md-sys-color-primary

md-text-field-filled-disabled-bgg($t, 'filled.disabled.bg')

System token--md-sys-color-on-surface

md-text-field-filled-disabled-border-bottom-colorg($t, 'filled.disabled.border.bottom.color')

System token--md-sys-color-on-surface

md-text-field-filled-disabled-label-colorg($t, 'filled.disabled.label.color')

System token--md-sys-color-on-surface

md-text-field-filled-disabled-input-colorg($t, 'filled.disabled.input.color')

System token--md-sys-color-on-surface

md-text-field-filled-disabled-icon-colorg($t, 'filled.disabled.icon.color')

System token--md-sys-color-on-surface

md-text-field-filled-error-border-bottom-colorg($t, 'filled.error.border.bottom.color')

System token--md-sys-color-error

md-text-field-filled-error-label-colorg($t, 'filled.error.label.color')

System token--md-sys-color-error

md-text-field-filled-error-helper-colorg($t, 'filled.error.helper.color')

System token--md-sys-color-error

md-text-field-filled-error-hover-border-bottom-colorg($t, 'filled.error.hover.border.bottom.color')

System token--md-sys-color-error

md-text-field-filled-error-focused-border-bottom-colorg($t, 'filled.error.focused.border.bottom.color')

System token--md-sys-color-error

md-text-field-filled-error-focused-label-colorg($t, 'filled.error.focused.label.color')

System token--md-sys-color-error

md-text-field-outlined-hover-border-colorg($t, 'outlined.hover.border.color')

System token--md-sys-color-on-surface

md-text-field-outlined-focused-border-colorg($t, 'outlined.focused.border.color')

System token--md-sys-color-primary

md-text-field-outlined-focused-label-colorg($t, 'outlined.focused.label.color')

System token--md-sys-color-primary

md-text-field-outlined-disabled-border-colorg($t, 'outlined.disabled.border.color')

System token--md-sys-color-on-surface

md-text-field-outlined-disabled-label-colorg($t, 'outlined.disabled.label.color')

System token--md-sys-color-on-surface

md-text-field-outlined-disabled-input-colorg($t, 'outlined.disabled.input.color')

System token--md-sys-color-on-surface

md-text-field-outlined-disabled-icon-colorg($t, 'outlined.disabled.icon.color')

System token--md-sys-color-on-surface

md-text-field-outlined-error-border-colorg($t, 'outlined.error.border.color')

System token--md-sys-color-error

md-text-field-outlined-error-label-colorg($t, 'outlined.error.label.color')

System token--md-sys-color-error

md-text-field-outlined-error-helper-colorg($t, 'outlined.error.helper.color')

System token--md-sys-color-error

md-text-field-outlined-error-hover-border-colorg($t, 'outlined.error.hover.border.color')

System token--md-sys-color-error

md-text-field-outlined-error-focused-border-colorg($t, 'outlined.error.focused.border.color')

System token--md-sys-color-error

md-text-field-outlined-error-focused-label-colorg($t, 'outlined.error.focused.label.color')

System token--md-sys-color-error

MTextField API

Props, slots, and events are hydrated from the generated public manifest.

MTextField

Field family

src/runtime/components/ui/text-field

Props

NameTypeDefault

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

readonly

booleanfalse

variant

'filled' | 'outlined' | 'underline''filled'

rounded

'sharp' | 'small' | 'medium' | 'large' | 'pill''small'

labelPlacement

'top' | 'float' | 'inset' | 'hidden''float'

path

stringundefined

name

stringundefined

label

stringundefined

placeholder

stringundefined

helperText

stringundefined

error

booleanfalse

errorMessage

stringundefined

required

booleanfalse

autofocus

booleanfalse

autocomplete

stringundefined

density

'compact' | 'default' | 'comfortable''default' as MFieldDensity

type

'text' | 'number' | 'email' | 'password''text'

inputAttrsNative input attributes/listeners used by composite fields such as comboboxes.

InputHTMLAttributesundefined

populatedForce the floating label into its raised position regardless of the text value. Composite fields (e.g. a multiple combobox) set this while chips occupy the field but the text draft is empty, so the label does not drop back onto them on blur.

booleanfalse

Slots

Events

MTextField does not emit component-specific events. Native events fall through to its root element.