Text area

A text area takes several lines of free text, such as a delivery note. It can grow with what the reader types or keep a fixed height and scroll, and a row limit keeps a long answer from pushing the form down. Below, text areas hold a delivery note and a gift message.

Send note

Save draft

Print label

Ship it

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a text field⁠

Seven components share the text field's form. Each suits a different kind of value:

Text field: one line of free text, such as a name, a title, or a city.
Text area: several lines of free text, such as a comment, a description, or a delivery note.
Email field: an email address, which the form checks is well formed before it is sent, with the email keyboard on a phone.
Password field: a secret the screen hides as it is typed, such as a password or a PIN.
Number field: an exact number, shown formatted for the reader's locale, such as a quantity, a price, or a percentage.
Phone number field: a telephone number, with the dial pad on a phone.
Search field: a query that filters or searches as the reader types, with the search icon in place.

Two jobs belong elsewhere. A choice from a fixed list is a select, and a number picked by feel rather than typed exactly is a slider.

Choosing a variant⁠

Three variants set how much a text area stands out, from most to least:

Filled: a tinted container that stands out among other content, such as a comment box on a busy page.
Outlined: a line around the field that simplifies a form with many fields, such as a shipping address with a delivery note.
Text: no container and no visible label, so a heading or the surrounding text must say what the field is for, such as a note edited in place.

Built in⁠

auto-size grows the height with the text, from rows up to max-rows.
maxlength shows a character counter that screen readers read with the field.
error-text replaces supporting-text while the field is in error.
required adds the asterisk to the label and marks the field required for the form.
name and value submit with the owning form, and a form reset restores the field.
badge-value puts a badge on the field without a separate element.

Using text areas well⁠

Keep one variant across a form.
Write the label as a name, such as "Delivery note", and put guidance in supporting-text.
Set maxlength wherever the answer has a limit, so the counter shows the reader how much is left.
Set required rather than typing an asterisk into the label or supporting text.
Write error-text as the fix, such as "Add at least 20 characters", not only as the fault.

These rules follow Material 3 Expressive's guidance for text fields, on material.io.

Variants⁠

Omit variant and the text area takes the variant from your style configuration, which is filled unless you have changed it. The text variant draws no container and no visible label, so label only names the field for assistive technology.

Sizing⁠

rows sets how many lines the field shows, two by default, and cols its width in characters, 20 by default. Turn on auto-size and the field grows with its content, with rows as the minimum height. max-rows caps the growth, and the field then scrolls; the default of -1 means no cap.

The browser draws a grabber in the corner so the reader can drag the field larger. no-resize removes it, which suits an auto-sizing field, where the two would fight.

Label and help⁠

label rests in the input's place and floats above it once the field has focus or a value. placeholder is a hint and never the field's name. supporting-text sits below the field for guidance, and maxlength adds a counter beside it.

Validation⁠

Validation shows when asked, not while the reader types. The error state appears when reportValidity() runs or a form submit validates. required, minlength, and pattern set the rules. The preview cannot finish a submit, but the submit button still runs validation.

error forces the error state, and error-text replaces the supporting text while it shows. With an empty error-text, the supporting text stays.

pattern takes a regular expression that the whole value must match. An empty value passes, and an invalid expression is ignored. Here the field accepts a seven-character order code of two capital letters and five digits.

Keyboard⁠

inputmode picks the virtual keyboard a phone offers. tel shows a keypad, email adds the at sign, and numeric shows digits only. Without it, the text area takes the mode from your app configuration. A desktop browser shows no keyboard, so try this one on a phone.

Badges⁠

badge-value puts text on a badge. badge-dot shows a small dot instead, whether or not badge-value is set. badge-concealed hides the badge and keeps both settings, so clearing it brings the same badge back.

Forms⁠

A text area submits value under name, and a form reset restores the value attribute and clears a reported error. autocomplete passes a token to the browser.

The preview cannot submit a form, so the demo acts from the button's click.

Disabled and read-only⁠

disabled grays the text area out and takes it out of the Tab order. readonly keeps the value fixed, but the field stays focusable and selectable.

Density⁠

density takes five levels, 0 to 4, and tightens the field as the number rises. Omit it and the text area takes the level from your style configuration, which is standard unless you have changed it. The filled variant hides its label at 2 and above, leaving it as the accessible name only. The text variant ignores density.

Text direction⁠

text-direction overrides the direction of the typed text, with auto, LTR, and RTL as the choices. Auto picks the direction from the content, which suits fields that take both English and Arabic.

Properties⁠

Property	Attribute	Type	Description
`autocomplete`	`autocomplete`	`string`	Describes what, if any, type of autocomplete functionality the input should provide.See MDN: autocomplete attribute. See Forms.
`autoSize`	`auto-size`	`boolean`default `false`	Grows the text area vertically to fit its content instead of showing a scrollbar. `rows` sets the minimum visible height. See Sizing.
`badgeConcealed`	`badge-concealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`badge-dot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`badge-value`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`cols`	`cols`	`number`default `20`	The number of columns to display. See Sizing.
`density`	`density0`, `1`, `2`, `3`, `4`	`DensityDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled and read-only.
`error`	`error`	`boolean`default `false`	Shows the field in its error state and marks the input invalid for assistive technology.This error state overrides the error state controlled by `reportValidity()`. See Validation.
`errorText`	`error-text`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Validation.
`form`read-only		`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`inputMode`	`inputmodenone`, `decimal`, `email`, `numeric`, `search`, `tel`, `text`, `url`	`InputModeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`	The virtual keyboard to offer on a touch screen. With no `inputmode` attribute, the field's default input mode applies, which the application configuration can change. See Keyboard.
`label`	`label`	`string`	The field's label, which rests in the input's place and floats above it when the field has focus or a value. It is also the input's accessible name unless `aria-label` is set. Hidden in the filled variant at density 2 and above, where it is only the accessible name.Learn more about floating labels from the Material Design 3: text fields guidelines.For Text variants, only sets the ARIA label. See Variants, Label and help.
`labels`read-only		`NodeList`	The `<label>` elements associated with the element.
`maxLength`	`maxlength`	`number`default `-1`	The most characters the field accepts, or -1 for no limit. When set, a character counter shows below the field and is read as part of its description.See MDN: input maxlength attribute. See Label and help.
`maxRows`	`max-rows`	`number`default `-1`	The most rows an auto-sizing text area grows to before a scrollbar appears, or -1 for no limit. It applies only when `autoSize` is set. See Sizing.
`minLength`	`minlength`	`number`default `-1`	The fewest characters the value may have to pass constraint validation, checked once the user has edited it. Set to -1 for none.See MDN: input minlength attribute. See Validation.
`name`	`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noResize`	`no-resize`	`boolean`default `false`	Removes the resize handle from the text area's corner. A text area that grows with its content usually wants none. See Sizing.
`pattern`	`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Validation.
`placeholder`	`placeholder`	`string`	Placeholder text for when the field is empty. Unlike `label`, the placeholder never floats, and it is hidden once the field has a value.See MDN: placeholder attribute. See Label and help.
`readOnly`	`readonly`	`boolean`default `false`	Indicates whether or not a user should be able to edit the field's value.See MDN: input readonly attribute. See Disabled and read-only.
`required`	`required`	`boolean`default `false`	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when `reportValidity()` is invoked when value is empty. Additionally the floating label will render an asterisk `"*"` when true.See MDN: required attribute. See Validation.
`rows`	`rows`	`number`default `2`	The number of rows to display.When `autoSize` is set this is the minimum visible height — the textarea starts this tall and grows from there, up to `maxRows`. See Sizing.
`selectionEnd`		`number`	The position where the text selection ends.
`selectionStart`		`number`	The position where the text selection starts.
`supportingText`	`supporting-text`	`string`	Conveys additional information below the field, such as how it should be used. The text variant does not show it, but still reads it as part of the input's description. See Label and help.
`textDirection`	`text-direction""`, `auto`, `LTR`, `RTL`	`TextDirectionTextDirection.Default`, `.Auto`, `.LTR`, `.RTL`default `TextDirection.Default`	Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. See Text direction.
`validationMessage`read-only		`string`	The message describing why the element is invalid, or an empty string when it is valid.
`validity`read-only		`ValidityState`	The element's `ValidityState`.
`value`	`value`	`string`	The field's current value, always as a string. See Forms.
`variant`	`variantfilled`, `outlined`, `text`	`FieldVariantFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. Unset, the style configuration's default field variant applies, else Filled. See Variants.
`willValidate`read-only		`boolean`	Whether the element takes part in constraint validation. False while it is disabled or read-only.

Slots⁠

Slot	Description
`container`	Custom background content.

Events⁠

Event	Type	Detail	Description
`select`	`Event`	—	Dispatched when the user selects text in the field. It bubbles.
`change`	`Event`	—	Dispatched when the user commits a change to the value, such as by leaving the field after editing it. It bubbles.
`input`	`InputEvent`	—	Dispatched each time the user edits the value. It bubbles and is composed.

Methods⁠

Method	Returns	Description
`checkValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches an `invalid` event; nothing changes on screen.
`reportValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches a cancelable `invalid` event and, unless a listener cancels it, shows `validationMessage` as the field's error text and focuses the field.
`reset()`	`void`	Restores the value the `value` attribute holds, or an empty string, and clears any error `reportValidity()` showed.
`select()`	`void`	Selects all the text in the field.See MDN: HTMLInputElement.select() and MDN: HTMLTextAreaElement.select().
`setCustomValidity(error: string)`	`void`	Sets a custom validation message, which makes the element invalid. An empty string clears it.
`setRangeText(replacement: string, start?: number, end?: number, selectionMode?: string)`	`void`	Replaces a range of the field's text and updates `value` to match. With only a replacement, it replaces the current selection; with a start and end, it replaces that range.
`setSelectionRange(start: number, end: number, direction?: string)`	`void`	Sets the start and end positions of the selection in the field.See MDN: HTMLInputElement.setSelectionRange() and MDN: HTMLTextAreaElement.setSelectionRange().

setRangeText() writes its result back to value.

Props⁠

Prop	Type	Description
`autocomplete`	`string`	Describes what, if any, type of autocomplete functionality the input should provide.See MDN: autocomplete attribute. See Forms.
`autoSize`	`boolean`default `false`	Grows the text area vertically to fit its content instead of showing a scrollbar. `rows` sets the minimum visible height. See Sizing.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`cols`	`number`default `20`	The number of columns to display. See Sizing.
`density`	`DensityTypeDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled and read-only.
`error`	`boolean`default `false`	Shows the field in its error state and marks the input invalid for assistive technology.This error state overrides the error state controlled by `reportValidity()`. See Validation.
`errorText`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Validation.
`form`read-only (ref)	`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`	The virtual keyboard to offer on a touch screen. With no `inputMode` attribute, the field's default input mode applies, which the application configuration can change. See Keyboard.
`label`	`string`	The field's label, which rests in the input's place and floats above it when the field has focus or a value. It is also the input's accessible name unless `aria-label` is set. Hidden in the filled variant at density 2 and above, where it is only the accessible name.Learn more about floating labels from the Material Design 3: text fields guidelines.For Text variants, only sets the ARIA label. See Variants, Label and help.
`labels`read-only (ref)	`NodeList`	The `<label>` elements associated with the element.
`maxLength`	`number`default `-1`	The most characters the field accepts, or -1 for no limit. When set, a character counter shows below the field and is read as part of its description.See MDN: input maxlength attribute. See Label and help.
`maxRows`	`number`default `-1`	The most rows an auto-sizing text area grows to before a scrollbar appears, or -1 for no limit. It applies only when `autoSize` is set. See Sizing.
`minLength`	`number`default `-1`	The fewest characters the value may have to pass constraint validation, checked once the user has edited it. Set to -1 for none.See MDN: input minlength attribute. See Validation.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noResize`	`boolean`default `false`	Removes the resize handle from the text area's corner. A text area that grows with its content usually wants none. See Sizing.
`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Validation.
`placeholder`	`string`	Placeholder text for when the field is empty. Unlike `label`, the placeholder never floats, and it is hidden once the field has a value.See MDN: placeholder attribute. See Label and help.
`readOnly`	`boolean`default `false`	Indicates whether or not a user should be able to edit the field's value.See MDN: input readonly attribute. See Disabled and read-only.
`required`	`boolean`default `false`	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when `reportValidity()` is invoked when value is empty. Additionally the floating label will render an asterisk `"*"` when true.See MDN: required attribute. See Validation.
`rows`	`number`default `2`	The number of rows to display.When `autoSize` is set this is the minimum visible height — the textarea starts this tall and grows from there, up to `maxRows`. See Sizing.
`selectionEnd`through the ref	`number`	The position where the text selection ends.
`selectionStart`through the ref	`number`	The position where the text selection starts.
`supportingText`	`string`	Conveys additional information below the field, such as how it should be used. The text variant does not show it, but still reads it as part of the input's description. See Label and help.
`textDirection`	`TextDirectionTypeTextDirection.Default`, `.Auto`, `.LTR`, `.RTL`default `TextDirection.Default`	Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. See Text direction.
`validationMessage`read-only (ref)	`string`	The message describing why the element is invalid, or an empty string when it is valid.
`validity`read-only (ref)	`ValidityState`	The element's `ValidityState`.
`value`	`string`	The field's current value, always as a string. See Forms.
`variant`	`FieldVariantTypeFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. Unset, the style configuration's default field variant applies, else Filled. See Variants.
`willValidate`read-only (ref)	`boolean`	Whether the element takes part in constraint validation. False while it is disabled or read-only.

Children⁠

Child	Description
a child with `slot="container"`	Custom background content.

Events⁠

Prop	Argument	Description
`onSelect`	`Event`	Dispatched when the user selects text in the field. It bubbles.
`onChange`	`React.ChangeEvent<HTMLInputElement>`	Dispatched when the user commits a change to the value, such as by leaving the field after editing it. It bubbles.
`onInput`	`React.ChangeEvent<HTMLInputElement>`	Dispatched each time the user edits the value. It bubbles and is composed.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`checkValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches an `invalid` event; nothing changes on screen.
`reportValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches a cancelable `invalid` event and, unless a listener cancels it, shows `validationMessage` as the field's error text and focuses the field.
`reset()`	`void`	Restores the value the `value` attribute holds, or an empty string, and clears any error `reportValidity()` showed.
`select()`	`void`	Selects all the text in the field.See MDN: HTMLInputElement.select() and MDN: HTMLTextAreaElement.select().
`setCustomValidity(error: string)`	`void`	Sets a custom validation message, which makes the element invalid. An empty string clears it.
`setRangeText(replacement: string, start?: number, end?: number, selectionMode?: string)`	`void`	Replaces a range of the field's text and updates `value` to match. With only a replacement, it replaces the current selection; with a start and end, it replaces that range.
`setSelectionRange(start: number, end: number, direction?: string)`	`void`	Sets the start and end positions of the selection in the field.See MDN: HTMLInputElement.setSelectionRange() and MDN: HTMLTextAreaElement.setSelectionRange().

setRangeText() writes its result back to value.

Parameters⁠

Parameter	Type	Description
`Autocomplete`	`string?`	Describes what, if any, type of autocomplete functionality the input should provide.See MDN: autocomplete attribute. See Forms.
`AutoSize`	`bool?`default `false`	Grows the text area vertically to fit its content instead of showing a scrollbar. `Rows` sets the minimum visible height. See Sizing.
`BadgeConcealed`	`bool?`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`BadgeDot`	`bool?`default `false`	Shows the badge as a small dot with no text, whether or not `BadgeValue` is set. See Badges.
`BadgeValue`	`string?`	The badge's text. While it is empty and `BadgeDot` is not set, no badge renders. Ignored if `BadgeDot` is set. See Badges.
`Cols`	`int?`default `20`	The number of columns to display. See Sizing.
`Density`	`Density?Density.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`Disabled`	`bool?`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled and read-only.
`Error`	`bool?`default `false`	Shows the field in its error state and marks the input invalid for assistive technology.This error state overrides the error state controlled by `reportValidity()`. See Validation.
`ErrorText`	`string?`	The error message that replaces supporting text when `Error` is true. If `ErrorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Validation.
`InputMode`	`InputMode?InputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`	The virtual keyboard to offer on a touch screen. With no `InputMode` attribute, the field's default input mode applies, which the application configuration can change. See Keyboard.
`Label`	`string?`	The field's label, which rests in the input's place and floats above it when the field has focus or a value. It is also the input's accessible name unless `aria-label` is set. Hidden in the filled variant at density 2 and above, where it is only the accessible name.Learn more about floating labels from the Material Design 3: text fields guidelines.For Text variants, only sets the ARIA label. See Variants, Label and help.
`MaxLength`	`int?`default `-1`	The most characters the field accepts, or -1 for no limit. When set, a character counter shows below the field and is read as part of its description.See MDN: input maxlength attribute. See Label and help.
`MaxRows`	`int?`default `-1`	The most rows an auto-sizing text area grows to before a scrollbar appears, or -1 for no limit. It applies only when `AutoSize` is set. See Sizing.
`MinLength`	`int?`default `-1`	The fewest characters the value may have to pass constraint validation, checked once the user has edited it. Set to -1 for none.See MDN: input minlength attribute. See Validation.
`Name`	`string?`	The name the element's value is submitted under with its form. See Forms.
`NoResize`	`bool?`default `false`	Removes the resize handle from the text area's corner. A text area that grows with its content usually wants none. See Sizing.
`Pattern`	`string?`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Validation.
`Placeholder`	`string?`	Placeholder text for when the field is empty. Unlike `Label`, the placeholder never floats, and it is hidden once the field has a value.See MDN: placeholder attribute. See Label and help.
`ReadOnly`	`bool?`default `false`	Indicates whether or not a user should be able to edit the field's value.See MDN: input readonly attribute. See Disabled and read-only.
`Required`	`bool?`default `false`	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when `reportValidity()` is invoked when value is empty. Additionally the floating label will render an asterisk `"*"` when true.See MDN: required attribute. See Validation.
`Rows`	`int?`default `2`	The number of rows to display.When `AutoSize` is set this is the minimum visible height — the textarea starts this tall and grows from there, up to `MaxRows`. See Sizing.
`SupportingText`	`string?`	Conveys additional information below the field, such as how it should be used. The text variant does not show it, but still reads it as part of the input's description. See Label and help.
`TextDirection`	`TextDirection?TextDirection.Default`, `.Auto`, `.LTR`, `.RTL`default `TextDirection.Default`	Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. See Text direction.
`Value`	`string?`	The field's current value, always as a string. See Forms.
`ValueExpression`	`Expression<Func<string>>?`	Gets or sets an expression that identifies the bound value.
`Variant`	`FieldVariant?FieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. Unset, the style configuration's default field variant applies, else Filled. See Variants.

Render fragments⁠

Parameter	Type	Description
`Container`	`RenderFragment?`	Custom background content.

Event callbacks⁠

Parameter	Type	Description
`OnSelect`	`EventCallback`	Dispatched when the user selects text in the field. It bubbles.
`OnChange`	`EventCallback<ChangeEventArgs>`	Dispatched when the user commits a change to the value, such as by leaving the field after editing it. It bubbles.
`OnInput`	`EventCallback<ChangeEventArgs>`	Dispatched each time the user edits the value. It bubbles and is composed.

Inputs⁠

Input	Type	Description
`autocomplete`	`string`	Describes what, if any, type of autocomplete functionality the input should provide.See MDN: autocomplete attribute. See Forms.
`autoSize`	`boolean`default `false`	Grows the text area vertically to fit its content instead of showing a scrollbar. `rows` sets the minimum visible height. See Sizing.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`cols`	`number`default `20`	The number of columns to display. See Sizing.
`density`	`DensityTypeDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled and read-only.
`error`	`boolean`default `false`	Shows the field in its error state and marks the input invalid for assistive technology.This error state overrides the error state controlled by `reportValidity()`. See Validation.
`errorText`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Validation.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`	The virtual keyboard to offer on a touch screen. With no `inputMode` attribute, the field's default input mode applies, which the application configuration can change. See Keyboard.
`label`	`string`	The field's label, which rests in the input's place and floats above it when the field has focus or a value. It is also the input's accessible name unless `aria-label` is set. Hidden in the filled variant at density 2 and above, where it is only the accessible name.Learn more about floating labels from the Material Design 3: text fields guidelines.For Text variants, only sets the ARIA label. See Variants, Label and help.
`maxLength`	`number`default `-1`	The most characters the field accepts, or -1 for no limit. When set, a character counter shows below the field and is read as part of its description.See MDN: input maxlength attribute. See Label and help.
`maxRows`	`number`default `-1`	The most rows an auto-sizing text area grows to before a scrollbar appears, or -1 for no limit. It applies only when `autoSize` is set. See Sizing.
`minLength`	`number`default `-1`	The fewest characters the value may have to pass constraint validation, checked once the user has edited it. Set to -1 for none.See MDN: input minlength attribute. See Validation.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noResize`	`boolean`default `false`	Removes the resize handle from the text area's corner. A text area that grows with its content usually wants none. See Sizing.
`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Validation.
`placeholder`	`string`	Placeholder text for when the field is empty. Unlike `label`, the placeholder never floats, and it is hidden once the field has a value.See MDN: placeholder attribute. See Label and help.
`readOnly`	`boolean`default `false`	Indicates whether or not a user should be able to edit the field's value.See MDN: input readonly attribute. See Disabled and read-only.
`required`	`boolean`default `false`	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when `reportValidity()` is invoked when value is empty. Additionally the floating label will render an asterisk `"*"` when true.See MDN: required attribute. See Validation.
`rows`	`number`default `2`	The number of rows to display.When `autoSize` is set this is the minimum visible height — the textarea starts this tall and grows from there, up to `maxRows`. See Sizing.
`supportingText`	`string`	Conveys additional information below the field, such as how it should be used. The text variant does not show it, but still reads it as part of the input's description. See Label and help.
`textDirection`	`TextDirectionTypeTextDirection.Default`, `.Auto`, `.LTR`, `.RTL`default `TextDirection.Default`	Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. See Text direction.
`value`	`string`	The field's current value, always as a string. See Forms.
`variant`	`FieldVariantTypeFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. Unset, the style configuration's default field variant applies, else Filled. See Variants.

Content projection⁠

Content	Description
an element with `slot="container"`	Custom background content.

Outputs⁠

Output	Event	Description
`cwSelect`	`Event`	Dispatched when the user selects text in the field. It bubbles.
`cwChange`	`Event`	Dispatched when the user commits a change to the value, such as by leaving the field after editing it. It bubbles.
`cwInput`	`InputEvent`	Dispatched each time the user edits the value. It bubbles and is composed.

Props⁠

Prop	Type	Description
`autocomplete`	`string`	Describes what, if any, type of autocomplete functionality the input should provide.See MDN: autocomplete attribute. See Forms.
`autoSize`	`boolean`default `false`	Grows the text area vertically to fit its content instead of showing a scrollbar. `rows` sets the minimum visible height. See Sizing.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`cols`	`number`default `20`	The number of columns to display. See Sizing.
`density`	`DensityTypeDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled and read-only.
`error`	`boolean`default `false`	Shows the field in its error state and marks the input invalid for assistive technology.This error state overrides the error state controlled by `reportValidity()`. See Validation.
`errorText`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Validation.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`	The virtual keyboard to offer on a touch screen. With no `inputMode` attribute, the field's default input mode applies, which the application configuration can change. See Keyboard.
`label`	`string`	The field's label, which rests in the input's place and floats above it when the field has focus or a value. It is also the input's accessible name unless `aria-label` is set. Hidden in the filled variant at density 2 and above, where it is only the accessible name.Learn more about floating labels from the Material Design 3: text fields guidelines.For Text variants, only sets the ARIA label. See Variants, Label and help.
`maxLength`	`number`default `-1`	The most characters the field accepts, or -1 for no limit. When set, a character counter shows below the field and is read as part of its description.See MDN: input maxlength attribute. See Label and help.
`maxRows`	`number`default `-1`	The most rows an auto-sizing text area grows to before a scrollbar appears, or -1 for no limit. It applies only when `autoSize` is set. See Sizing.
`minLength`	`number`default `-1`	The fewest characters the value may have to pass constraint validation, checked once the user has edited it. Set to -1 for none.See MDN: input minlength attribute. See Validation.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noResize`	`boolean`default `false`	Removes the resize handle from the text area's corner. A text area that grows with its content usually wants none. See Sizing.
`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Validation.
`placeholder`	`string`	Placeholder text for when the field is empty. Unlike `label`, the placeholder never floats, and it is hidden once the field has a value.See MDN: placeholder attribute. See Label and help.
`readOnly`	`boolean`default `false`	Indicates whether or not a user should be able to edit the field's value.See MDN: input readonly attribute. See Disabled and read-only.
`required`	`boolean`default `false`	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when `reportValidity()` is invoked when value is empty. Additionally the floating label will render an asterisk `"*"` when true.See MDN: required attribute. See Validation.
`rows`	`number`default `2`	The number of rows to display.When `autoSize` is set this is the minimum visible height — the textarea starts this tall and grows from there, up to `maxRows`. See Sizing.
`supportingText`	`string`	Conveys additional information below the field, such as how it should be used. The text variant does not show it, but still reads it as part of the input's description. See Label and help.
`textDirection`	`TextDirectionTypeTextDirection.Default`, `.Auto`, `.LTR`, `.RTL`default `TextDirection.Default`	Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. See Text direction.
`value`	`string`	The field's current value, always as a string. See Forms.
`variant`	`FieldVariantTypeFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. Unset, the style configuration's default field variant applies, else Filled. See Variants.

Slots⁠

Slot	Description
`container`	Custom background content.

Events⁠

Event	Type	Description
`select`	`Event`	Dispatched when the user selects text in the field. It bubbles.
`change`	`Event`	Dispatched when the user commits a change to the value, such as by leaving the field after editing it. It bubbles.
`input`	`InputEvent`	Dispatched each time the user edits the value. It bubbles and is composed.

Props⁠

Prop	Type	Description
`autocomplete`	`string`	Describes what, if any, type of autocomplete functionality the input should provide.See MDN: autocomplete attribute. See Forms.
`autoSize`	`boolean`default `false`	Grows the text area vertically to fit its content instead of showing a scrollbar. `rows` sets the minimum visible height. See Sizing.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`cols`	`number`default `20`	The number of columns to display. See Sizing.
`density`	`DensityTypeDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled and read-only.
`error`	`boolean`default `false`	Shows the field in its error state and marks the input invalid for assistive technology.This error state overrides the error state controlled by `reportValidity()`. See Validation.
`errorText`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Validation.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`	The virtual keyboard to offer on a touch screen. With no `inputMode` attribute, the field's default input mode applies, which the application configuration can change. See Keyboard.
`label`	`string`	The field's label, which rests in the input's place and floats above it when the field has focus or a value. It is also the input's accessible name unless `aria-label` is set. Hidden in the filled variant at density 2 and above, where it is only the accessible name.Learn more about floating labels from the Material Design 3: text fields guidelines.For Text variants, only sets the ARIA label. See Variants, Label and help.
`maxLength`	`number`default `-1`	The most characters the field accepts, or -1 for no limit. When set, a character counter shows below the field and is read as part of its description.See MDN: input maxlength attribute. See Label and help.
`maxRows`	`number`default `-1`	The most rows an auto-sizing text area grows to before a scrollbar appears, or -1 for no limit. It applies only when `autoSize` is set. See Sizing.
`minLength`	`number`default `-1`	The fewest characters the value may have to pass constraint validation, checked once the user has edited it. Set to -1 for none.See MDN: input minlength attribute. See Validation.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noResize`	`boolean`default `false`	Removes the resize handle from the text area's corner. A text area that grows with its content usually wants none. See Sizing.
`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Validation.
`placeholder`	`string`	Placeholder text for when the field is empty. Unlike `label`, the placeholder never floats, and it is hidden once the field has a value.See MDN: placeholder attribute. See Label and help.
`readOnly`	`boolean`default `false`	Indicates whether or not a user should be able to edit the field's value.See MDN: input readonly attribute. See Disabled and read-only.
`required`	`boolean`default `false`	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when `reportValidity()` is invoked when value is empty. Additionally the floating label will render an asterisk `"*"` when true.See MDN: required attribute. See Validation.
`rows`	`number`default `2`	The number of rows to display.When `autoSize` is set this is the minimum visible height — the textarea starts this tall and grows from there, up to `maxRows`. See Sizing.
`supportingText`	`string`	Conveys additional information below the field, such as how it should be used. The text variant does not show it, but still reads it as part of the input's description. See Label and help.
`textDirection`	`TextDirectionTypeTextDirection.Default`, `.Auto`, `.LTR`, `.RTL`default `TextDirection.Default`	Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. See Text direction.
`value`	`string`	The field's current value, always as a string. See Forms.
`variant`	`FieldVariantTypeFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. Unset, the style configuration's default field variant applies, else Filled. See Variants.

Snippets⁠

Snippet	Description
`containerSnippet`	Custom background content.

Events⁠

Prop	Type	Description
`onSelect`	`Event`	Dispatched when the user selects text in the field. It bubbles.
`onChange`	`Event`	Dispatched when the user commits a change to the value, such as by leaving the field after editing it. It bubbles.
`onInput`	`InputEvent`	Dispatched each time the user edits the value. It bubbles and is composed.

Each attribute value has its own tokens; a cell shows its token's value, and selecting the cell shows the token's fallback path, with each name and value ready to copy. For example, the filled column's active-indicator-color row is --ct-field-filled-active-indicator-color, which defaults to --ct-sys-color-on-surface-variant.

Variant⁠

Name	`filled`	`outlined`	`text`
`active-indicator-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-active-indicator-color`	—	—
`active-indicator-height`	`1px` `--ct-field-filled-active-indicator-height`	—	—
`bottom-space`	`16px` `--ct-field-filled-bottom-space`	`16px` `--ct-field-outlined-bottom-space`	—
`caret-color`	`--ct-sys-color-primary` `--ct-field-filled-caret-color`	`--ct-sys-color-primary` `--ct-field-outlined-caret-color`	`--ct-sys-color-primary` `--ct-field-text-caret-color`
`container-color`	`--ct-sys-color-surface-container-highest` `--ct-field-filled-container-color`	—	—
`container-end-end-radius`	—	`--ct-sys-corner-radius-extra-small` `--ct-field-outlined-container-end-end-radius`	—
`container-end-start-radius`	—	`--ct-sys-corner-radius-extra-small` `--ct-field-outlined-container-end-start-radius`	—
`container-start-end-radius`	`--ct-sys-corner-radius-extra-small` `--ct-field-filled-container-start-end-radius`	`--ct-sys-corner-radius-extra-small` `--ct-field-outlined-container-start-end-radius`	—
`container-start-start-radius`	`--ct-sys-corner-radius-extra-small` `--ct-field-filled-container-start-start-radius`	`--ct-sys-corner-radius-extra-small` `--ct-field-outlined-container-start-start-radius`	—
`content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-content-color`	`--ct-sys-color-on-surface` `--ct-field-text-content-color`
`content-font`	`--ct-sys-typescale-body-large-font` `--ct-field-filled-content-font`	`--ct-sys-typescale-body-large-font` `--ct-field-outlined-content-font`	`--ct-sys-typescale-body-large-font` `--ct-field-text-content-font`
`content-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-filled-content-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-outlined-content-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-text-content-line-height`
`content-placeholder-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-content-placeholder-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-content-placeholder-color`	`--ct-sys-color-on-surface-variant` `--ct-field-text-content-placeholder-color`
`content-prefix-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-content-prefix-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-content-prefix-color`	`--ct-sys-color-on-surface-variant` `--ct-field-text-content-prefix-color`
`content-prefix-trailing-space`	`2px` `--ct-field-filled-content-prefix-trailing-space`	`2px` `--ct-field-outlined-content-prefix-trailing-space`	`2px` `--ct-field-text-content-prefix-trailing-space`
`content-size`	`--ct-sys-typescale-body-large-size` `--ct-field-filled-content-size`	`--ct-sys-typescale-body-large-size` `--ct-field-outlined-content-size`	`--ct-sys-typescale-body-large-size` `--ct-field-text-content-size`
`content-space`	`16px` `--ct-field-filled-content-space`	`16px` `--ct-field-outlined-content-space`	—
`content-suffix-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-content-suffix-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-content-suffix-color`	`--ct-sys-color-on-surface-variant` `--ct-field-text-content-suffix-color`
`content-suffix-leading-space`	`2px` `--ct-field-filled-content-suffix-leading-space`	`2px` `--ct-field-outlined-content-suffix-leading-space`	`2px` `--ct-field-text-content-suffix-leading-space`
`content-tracking`	`--ct-sys-typescale-body-large-tracking` `--ct-field-filled-content-tracking`	`--ct-sys-typescale-body-large-tracking` `--ct-field-outlined-content-tracking`	`--ct-sys-typescale-body-large-tracking` `--ct-field-text-content-tracking`
`content-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-filled-content-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-outlined-content-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-text-content-weight`
`label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-label-text-color`	—
`label-text-font`	`--ct-sys-typescale-body-large-font` `--ct-field-filled-label-text-font`	`--ct-sys-typescale-body-large-font` `--ct-field-outlined-label-text-font`	—
`label-text-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-filled-label-text-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-outlined-label-text-line-height`	—
`label-text-padding-bottom`	—	`8px` `--ct-field-outlined-label-text-padding-bottom`	—
`label-text-populated-line-height`	`--ct-sys-typescale-body-small-line-height` `--ct-field-filled-label-text-populated-line-height`	`--ct-sys-typescale-body-small-line-height` `--ct-field-outlined-label-text-populated-line-height`	—
`label-text-populated-size`	`--ct-sys-typescale-body-small-size` `--ct-field-filled-label-text-populated-size`	`--ct-sys-typescale-body-small-size` `--ct-field-outlined-label-text-populated-size`	—
`label-text-size`	`--ct-sys-typescale-body-large-size` `--ct-field-filled-label-text-size`	`--ct-sys-typescale-body-large-size` `--ct-field-outlined-label-text-size`	—
`label-text-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-filled-label-text-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-outlined-label-text-weight`	—
`leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-leading-content-color`	—
`leading-content-size`	`24px` `--ct-field-filled-leading-content-size`	`24px` `--ct-field-outlined-leading-content-size`	`24px` `--ct-field-text-leading-content-size`
`leading-space`	`16px` `--ct-field-filled-leading-space`	`16px` `--ct-field-outlined-leading-space`	—
`outline-color`	—	`--ct-sys-color-outline` `--ct-field-outlined-outline-color`	—
`outline-label-padding`	—	`4px` `--ct-field-outlined-outline-label-padding`	—
`outline-width`	—	`1px` `--ct-field-outlined-outline-width`	—
`supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-supporting-text-color`	—
`supporting-text-font`	`--ct-sys-typescale-body-small-font` `--ct-field-filled-supporting-text-font`	`--ct-sys-typescale-body-small-font` `--ct-field-outlined-supporting-text-font`	—
`supporting-text-leading-space`	`16px` `--ct-field-filled-supporting-text-leading-space`	`16px` `--ct-field-outlined-supporting-text-leading-space`	—
`supporting-text-line-height`	`--ct-sys-typescale-body-small-line-height` `--ct-field-filled-supporting-text-line-height`	`--ct-sys-typescale-body-small-line-height` `--ct-field-outlined-supporting-text-line-height`	—
`supporting-text-size`	`--ct-sys-typescale-body-small-size` `--ct-field-filled-supporting-text-size`	`--ct-sys-typescale-body-small-size` `--ct-field-outlined-supporting-text-size`	—
`supporting-text-top-space`	`4px` `--ct-field-filled-supporting-text-top-space`	`4px` `--ct-field-outlined-supporting-text-top-space`	—
`supporting-text-tracking`	`--ct-sys-typescale-body-small-tracking` `--ct-field-filled-supporting-text-tracking`	`--ct-sys-typescale-body-small-tracking` `--ct-field-outlined-supporting-text-tracking`	—
`supporting-text-trailing-space`	`16px` `--ct-field-filled-supporting-text-trailing-space`	`16px` `--ct-field-outlined-supporting-text-trailing-space`	—
`supporting-text-weight`	`--ct-sys-typescale-body-small-weight` `--ct-field-filled-supporting-text-weight`	`--ct-sys-typescale-body-small-weight` `--ct-field-outlined-supporting-text-weight`	—
`top-space`	`16px` `--ct-field-filled-top-space`	`16px` `--ct-field-outlined-top-space`	—
`trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-trailing-content-color`	—
`trailing-content-size`	`24px` `--ct-field-filled-trailing-content-size`	`24px` `--ct-field-outlined-trailing-content-size`	`24px` `--ct-field-text-trailing-content-size`
`trailing-space`	`16px` `--ct-field-filled-trailing-space`	`16px` `--ct-field-outlined-trailing-space`	—
`with-label-bottom-space`	`8px` `--ct-field-filled-with-label-bottom-space`	—	—
`with-label-top-space`	`8px` `--ct-field-filled-with-label-top-space`	—	—
`with-leading-content-leading-space`	`12px` `--ct-field-filled-with-leading-content-leading-space`	`12px` `--ct-field-outlined-with-leading-content-leading-space`	—
`with-trailing-content-trailing-space`	`12px` `--ct-field-filled-with-trailing-content-trailing-space`	`12px` `--ct-field-outlined-with-trailing-content-trailing-space`	—
`hover-active-indicator-color`	`--ct-sys-color-on-surface` `--ct-field-filled-hover-active-indicator-color`	—	—
`hover-active-indicator-height`	`1px` `--ct-field-filled-hover-active-indicator-height`	—	—
`hover-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-hover-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-hover-content-color`	—
`hover-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-hover-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-hover-label-text-color`	—
`hover-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-hover-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-hover-leading-content-color`	—
`hover-outline-color`	—	`--ct-sys-color-on-surface` `--ct-field-outlined-hover-outline-color`	—
`hover-outline-width`	—	`1px` `--ct-field-outlined-hover-outline-width`	—
`hover-state-layer-color`	`--ct-sys-color-on-surface` `--ct-field-filled-hover-state-layer-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-hover-state-layer-color`	—
`hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-field-filled-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-field-outlined-hover-state-layer-opacity`	—
`hover-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-hover-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-hover-supporting-text-color`	—
`hover-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-hover-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-hover-trailing-content-color`	—
`focus-active-indicator-color`	`--ct-sys-color-primary` `--ct-field-filled-focus-active-indicator-color`	—	—
`focus-active-indicator-height`	`3px` `--ct-field-filled-focus-active-indicator-height`	—	—
`focus-caret-color`	`--ct-sys-color-primary` `--ct-field-filled-focus-caret-color`	`--ct-sys-color-primary` `--ct-field-outlined-focus-caret-color`	`--ct-sys-color-primary` `--ct-field-text-focus-caret-color`
`focus-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-focus-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-focus-content-color`	—
`focus-label-text-color`	`--ct-sys-color-primary` `--ct-field-filled-focus-label-text-color`	`--ct-sys-color-primary` `--ct-field-outlined-focus-label-text-color`	—
`focus-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-focus-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-focus-leading-content-color`	—
`focus-outline-color`	—	`--ct-sys-color-primary` `--ct-field-outlined-focus-outline-color`	`--ct-sys-color-primary` `--ct-field-text-focus-outline-color`
`focus-outline-width`	—	`2px` `--ct-field-outlined-focus-outline-width`	`2px` `--ct-field-text-focus-outline-width`
`focus-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-focus-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-focus-supporting-text-color`	—
`focus-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-focus-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-focus-trailing-content-color`	—
`disabled-active-indicator-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-active-indicator-color`	—	—
`disabled-active-indicator-height`	`1px` `--ct-field-filled-disabled-active-indicator-height`	—	—
`disabled-active-indicator-opacity`	`0.38` `--ct-field-filled-disabled-active-indicator-opacity`	—	—
`disabled-container-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-container-color`	—	—
`disabled-container-opacity`	`0.04` `--ct-field-filled-disabled-container-opacity`	—	—
`disabled-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-content-color`	`--ct-sys-color-on-surface` `--ct-field-text-disabled-content-color`
`disabled-content-opacity`	`0.38` `--ct-field-filled-disabled-content-opacity`	`0.38` `--ct-field-outlined-disabled-content-opacity`	`0.38` `--ct-field-text-disabled-content-opacity`
`disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-label-text-color`	—
`disabled-label-text-opacity`	`0.38` `--ct-field-filled-disabled-label-text-opacity`	`0.38` `--ct-field-outlined-disabled-label-text-opacity`	—
`disabled-leading-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-leading-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-leading-content-color`	—
`disabled-leading-content-opacity`	`0.38` `--ct-field-filled-disabled-leading-content-opacity`	`0.38` `--ct-field-outlined-disabled-leading-content-opacity`	—
`disabled-outline-color`	—	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-outline-color`	—
`disabled-outline-opacity`	—	`0.12` `--ct-field-outlined-disabled-outline-opacity`	—
`disabled-outline-width`	—	`1px` `--ct-field-outlined-disabled-outline-width`	—
`disabled-supporting-text-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-supporting-text-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-supporting-text-color`	—
`disabled-supporting-text-opacity`	`0.38` `--ct-field-filled-disabled-supporting-text-opacity`	`0.38` `--ct-field-outlined-disabled-supporting-text-opacity`	—
`disabled-trailing-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-trailing-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-trailing-content-color`	—
`disabled-trailing-content-opacity`	`0.38` `--ct-field-filled-disabled-trailing-content-opacity`	`0.38` `--ct-field-outlined-disabled-trailing-content-opacity`	—
`error-active-indicator-color`	`--ct-sys-color-error` `--ct-field-filled-error-active-indicator-color`	—	—
`error-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-error-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-error-content-color`	`--ct-sys-color-on-surface` `--ct-field-text-error-content-color`
`error-focus-active-indicator-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-active-indicator-color`	—	—
`error-focus-caret-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-caret-color`	`--ct-sys-color-error` `--ct-field-outlined-error-focus-caret-color`	`--ct-sys-color-error` `--ct-field-text-error-focus-caret-color`
`error-focus-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-error-focus-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-error-focus-content-color`	—
`error-focus-label-text-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-label-text-color`	`--ct-sys-color-error` `--ct-field-outlined-error-focus-label-text-color`	—
`error-focus-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-error-focus-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-error-focus-leading-content-color`	—
`error-focus-outline-color`	—	`--ct-sys-color-error` `--ct-field-outlined-error-focus-outline-color`	`--ct-sys-color-error` `--ct-field-text-error-focus-outline-color`
`error-focus-supporting-text-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-supporting-text-color`	`--ct-sys-color-error` `--ct-field-outlined-error-focus-supporting-text-color`	—
`error-focus-trailing-content-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-trailing-content-color`	`--ct-sys-color-error` `--ct-field-outlined-error-focus-trailing-content-color`	—
`error-hover-active-indicator-color`	`--ct-sys-color-on-error-container` `--ct-field-filled-error-hover-active-indicator-color`	—	—
`error-hover-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-error-hover-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-error-hover-content-color`	—
`error-hover-label-text-color`	`--ct-sys-color-on-error-container` `--ct-field-filled-error-hover-label-text-color`	`--ct-sys-color-on-error-container` `--ct-field-outlined-error-hover-label-text-color`	—
`error-hover-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-error-hover-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-error-hover-leading-content-color`	—
`error-hover-outline-color`	—	`--ct-sys-color-on-error-container` `--ct-field-outlined-error-hover-outline-color`	—
`error-hover-state-layer-color`	`--ct-sys-color-on-surface` `--ct-field-filled-error-hover-state-layer-color`	—	—
`error-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-field-filled-error-hover-state-layer-opacity`	—	—
`error-hover-supporting-text-color`	`--ct-sys-color-on-error-container` `--ct-field-filled-error-hover-supporting-text-color`	`--ct-sys-color-on-error-container` `--ct-field-outlined-error-hover-supporting-text-color`	—
`error-hover-trailing-content-color`	`--ct-sys-color-on-error-container` `--ct-field-filled-error-hover-trailing-content-color`	`--ct-sys-color-on-error-container` `--ct-field-outlined-error-hover-trailing-content-color`	—
`error-label-text-color`	`--ct-sys-color-error` `--ct-field-filled-error-label-text-color`	`--ct-sys-color-error` `--ct-field-outlined-error-label-text-color`	—
`error-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-error-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-error-leading-content-color`	—
`error-outline-color`	—	`--ct-sys-color-error` `--ct-field-outlined-error-outline-color`	—
`error-supporting-text-color`	`--ct-sys-color-error` `--ct-field-filled-error-supporting-text-color`	`--ct-sys-color-error` `--ct-field-outlined-error-supporting-text-color`	—
`error-trailing-content-color`	`--ct-sys-color-error` `--ct-field-filled-error-trailing-content-color`	`--ct-sys-color-error` `--ct-field-outlined-error-trailing-content-color`	—

Names and states⁠

A text area exposes the role textbox. No WAI-ARIA Authoring Practices pattern applies, since it behaves as a native text input.

The accessible name is the text area's aria-label when set, otherwise label.
The text variant shows no label, and the filled variant hides it at density 2 and above. In both, label is the accessible name only.
Any aria-* attribute on the text area other than aria-label, aria-describedby included, has no effect.
In the filled and outlined variants, the description is the supporting text, or the error text while in error, then the counter as "n / max". A screen reader reads it with the field.
A screen reader announces the field as invalid in the error state, which is error or an error that validation reported. When error text shows, it is announced as it appears.
required makes a screen reader announce the field as required and adds the asterisk to the visible label. Write no asterisk of your own.
A placeholder is a hint, never a name. Set label or aria-label on every text area.
For a short answer on one line, a text field suits better.

Keyboard and focus⁠

Key	Action
Tab	Moves focus into the text area, and on to the next control
Shift+Tab	Moves focus back to the previous control
Enter	Inserts a new line, and never submits the form
Arrow keys, Home, End	Move the caret within the text

Every key here behaves as in a native text area.

Focus shows differently by variant. The filled variant thickens its active indicator, and the outlined variant thickens its outline. The text variant draws a focus ring around the text.
disabled, or a disabled <fieldset> around the text area, disables the text area and removes it from the Tab order. There is no soft-disabled state.
readonly keeps focus and text selection, so a reader can still reach and copy the value.

Pointer and touch⁠

WCAG 2.5.8 sets a minimum target of 24 by 24 CSS pixels. The text area is at least 420 pixels wide, and its default two rows each take a 24-pixel line height, so it exceeds that minimum.
The browser's resize grabber sits in the bottom-inline-end corner. no-resize removes it, for example beside auto-size, which already sizes the field.

Display settings⁠

In forced colors, a disabled text area's label, content, supporting text, and indicator take GrayText. The outlined border is redrawn as a real border, and the text variant's focus ring is Highlight.
The label's 150-millisecond float animation does not check the reduced-motion preference, so it plays whatever the setting.
text-direction overrides the direction of the typed text, and the resize grabber sits at the inline end, so it follows the direction.

Standards⁠

With its defaults, the text area meets three WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.4.7 Focus Visible (AA)
2.5.8 Target Size (Minimum) (AA)

Four more depend on how you use it:

1.3.5 Identify Input Purpose (AA): set autocomplete to the matching token on a field that collects personal data.
3.3.1 Error Identification (A): set error-text to say what is wrong.
3.3.2 Labels or Instructions (A): set label, and add supporting-text where the field needs guidance.
4.1.2 Name, Role, Value (A): give the field a name with label or aria-label.

Text area

Reference docs⁠link

Choosing a text field⁠link

Choosing a variant⁠link

Built in⁠link

Using text areas well⁠link

Variants⁠link

Sizing⁠link

Label and help⁠link

Validation⁠link

Keyboard⁠link

Badges⁠link

Forms⁠link

Disabled and read-only⁠link

Density⁠link

Text direction⁠link

Properties⁠link

Slots⁠link

Events⁠link

Methods⁠link

Props⁠link

Children⁠link

Events⁠link

Methods⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Variant⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a text field⁠

Choosing a variant⁠

Built in⁠

Using text areas well⁠

Variants⁠

Sizing⁠

Label and help⁠

Validation⁠

Keyboard⁠

Badges⁠

Forms⁠

Disabled and read-only⁠

Density⁠

Text direction⁠

Properties⁠

Slots⁠

Events⁠

Methods⁠

Props⁠

Children⁠

Events⁠

Methods⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Variant⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠