Form input

Textarea

Multiline semantics without duplicating TextField styling or validation state.

Description

Playground

Configure the component and copy synchronized Vue code.

Description

Properties

Variant

Rows

Auto grow

Counter

Slots

Vue

<m-textarea
  v-model="description"
  variant="outlined"
  :rows="3"
  auto-grow
  counter
  label="Description"
>
</m-textarea>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MTextarea · All76 tokens

md-textarea

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

Resolved value4rem

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

Resolved value16rem

md-textarea-container-padding-blockg($t, 'container.padding.block')

Resolved value12rem

md-textarea-label-gapg($t, 'label.gap')

Resolved value16rem

md-textarea-label-inset-topg($t, 'label.inset.top')

Resolved value8rem

md-textarea-label-inset-body-paddingg($t, 'label.inset.body-padding')

Resolved value26rem

md-textarea-adornment-gapg($t, 'adornment.gap')

Resolved value8rem

md-textarea-support-gapg($t, 'support.gap')

Resolved value16rem

md-textarea-support-margin-topg($t, 'support.margin.top')

Resolved value4rem

md-textarea-support-padding-inlineg($t, 'support.padding.inline')

Resolved value16rem

md-textarea-footer-gapg($t, 'footer.gap')

Resolved value8rem

md-textarea-footer-padding-inlineg($t, 'footer.padding.inline')

Resolved value10rem

md-textarea-footer-padding-blockg($t, 'footer.padding.block')

Resolved value7rem

md-textarea-grip-insetg($t, 'grip.inset')

Resolved value6rem

md-textarea-grip-body-padding-bottomg($t, 'grip.body.padding.bottom')

Resolved value32rem

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

Resolved valuemax(16rem, min(var(--ui-textarea-radius), 48rem) + 4rem)

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

Resolved valuecalc(var(--ui-textarea-inset) - 5rem)

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

Resolved value4rem

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

Resolved value1rem

md-textarea-container-surfaceg($t, 'container.surface')

Resolved valuetransparent

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

Resolved valuecalc(100% - 32rem)

md-textarea-input-line-heightg($t, 'input.line-height')

Resolved value24rem

md-textarea-input-rowsg($t, 'input.rows')

Resolved value3

md-textarea-adornment-sizeg($t, 'adornment.size')

Resolved value20rem

md-textarea-support-min-heightg($t, 'support.min-height')

Resolved value18rem

md-textarea-grip-widthg($t, 'grip.width')

Resolved value44rem

md-textarea-grip-heightg($t, 'grip.height')

Resolved value5rem

md-textarea-grip-bandg($t, 'grip.band')

Resolved value20rem

md-textarea-grip-hit-widthg($t, 'grip.hit.width')

Resolved value72rem

md-textarea-grip-hit-heightg($t, 'grip.hit.height')

Resolved value16rem

md-textarea-growth-min-heightg($t, 'growth.min-height')

Resolved valuecalc(var(--m-textarea-rows, 3) * 1lh + 24rem)

md-textarea-growth-max-heightg($t, 'growth.max-height')

Resolved valuecalc(var(--m-textarea-max-rows) * 1lh + 24rem)

md-textarea-outlined-frameg($t, 'outlined.frame')

Resolved value1rem

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

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

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

System token--sys-shape-corner-none

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

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

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

System token--sys-shape-corner-medium

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

System token--sys-shape-corner-large

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

System token--sys-shape-corner-full

md-textarea-container-border-colorg($t, 'container.border.color')

System token--md-sys-color-outline

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

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

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

System token--md-sys-color-error

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

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

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

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

md-textarea-adornment-colorg($t, 'adornment.color')

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

md-textarea-support-colorg($t, 'support.color')

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

md-textarea-counter-colorg($t, 'counter.color')

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

md-textarea-footer-surfaceg($t, 'footer.surface')

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

md-textarea-footer-filled-surfaceg($t, 'footer.filled.surface')

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

md-textarea-grip-colorg($t, 'grip.color')

System token--md-sys-color-outline-variant

md-textarea-filled-surfaceg($t, 'filled.surface')

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

md-textarea-filled-border-colorg($t, 'filled.border.color')

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

md-textarea-label-active-scaleg($t, 'label.active.scale')

Resolved value0.75

md-textarea-grip-hover-colorg($t, 'grip.hover.color')

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

md-textarea-grip-focus-colorg($t, 'grip.focus.color')

System token--md-sys-color-primary

md-textarea-layer-hoverg($t, 'layer.hover')

Resolved value0.08

md-textarea-layer-pressedg($t, 'layer.pressed')

Resolved value0.12

md-textarea-focused-border-colorg($t, 'focused.border.color')

System token--md-sys-color-primary

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

System token--md-sys-color-primary

md-textarea-error-border-colorg($t, 'error.border.color')

System token--md-sys-color-error

md-textarea-error-colorg($t, 'error.color')

System token--md-sys-color-error

md-textarea-disabled-surfaceg($t, 'disabled.surface')

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

md-textarea-disabled-border-colorg($t, 'disabled.border.color')

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

md-textarea-disabled-colorg($t, 'disabled.color')

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

md-textarea-filled-hover-border-colorg($t, 'filled.hover.border.color')

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

md-textarea-filled-disabled-surfaceg($t, 'filled.disabled.surface')

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

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

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

MTextarea API

Props, slots, and events are generated from the current public kit contract.

MTextarea

Field family

src/runtime/components/ui/textarea

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''filled'

rounded

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

labelPlacementWhere the label sits. Defaults to `top` rather than the family's `float`: a multi-line box has no free first line to float into, which is what made the label land in the middle of the box before this was an axis.

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

path

stringundefined

name

stringundefined

label

stringundefined

placeholder

stringundefined

helperText

stringundefined

error

booleanfalse

errorMessage

stringundefined

required

booleanfalse

autofocus

booleanfalse

autocomplete

stringundefined

rowsMinimum and initial height, in rows.

number3

maxRowsGrowth ceiling in rows; beyond it the value scrolls.

numberundefined

autoGrowGrow with the content instead of staying at `rows`.

booleanfalse

resizableRender a corner grip the user can drag — or arrow-key — to set the height. A height set by hand outranks `autoGrow` until Escape resets it.

booleanfalse

resizeLabelAccessible name of the resize grip.

stringMESSAGES.textareaResize

maxlength

numberundefined

counter`true` counts against `maxlength`; a number sets a display-only limit.

boolean | numberfalse

spellcheck

booleanundefined

wrap

'soft' | 'hard' | 'off''soft'

Slots

Events

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