Password field

A password field hides each character as you type it, keeping a secret off the screen. Its autocomplete hint tells the browser's password manager whether to fill a saved password or suggest a new one. Below, one field gains an error while another hides its badge.

Save changes

Cancel

Forgot 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 emphasis a password field takes, from most to least:

Filled: a secret that should stand out among other content, such as the one field on a sign-in screen.
Outlined: a form with many fields, where less emphasis keeps it calm, such as account settings.
Text: a bare input inside a container that supplies its own label and layout, such as a row in a list.

Built in⁠

Hides every typed character and passes autocomplete to the browser, so a password manager can fill or suggest.
Shows supporting-text below the field and swaps it for error-text while error is set.
Adds an asterisk to the label for required, and a character counter for maxlength.
Turns a failed minlength or pattern into the field's own error text when a form submits or reportValidity() runs.
Submits the owning form on Enter, after committing an edited value with a change event.
Carries a badge from badge-value, which badge-concealed hides without losing its value.

Using password fields well⁠

Keep one variant, filled or outlined, across a form.
Label the field with what it holds, such as "Password" or "PIN", and put the rules for a good one in supporting-text.
Write error-text as the fix, such as "Use 12 or more characters", because it replaces the supporting text while the error shows.
Put a button with an accessible name in the slot for an icon that does something, and leave a decorative icon as a plain icon.
Let required add the asterisk; leave it out of the label and the supporting text.
Show a counter with maxlength only where the system truly has a limit.

Theming fields⁠

Set one design token and every field of that variant follows it: text fields, text areas, selects, and the email, number, password, search, and telephone fields alike.

--ct-field-filled-* themes filled fields, --ct-field-outlined-* outlined fields, and --ct-field-text-* fields with no container.
A token set on the page, or on any element that contains fields, reaches every field of its variant inside it.
To restyle password fields only, set the token on the element in your own CSS:

cw-password-field {
  --ct-field-outlined-corner-shape: square;
}

content_copy

The Styling tab lists every token and its default.

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

Variants⁠

The variant sets how much emphasis the field takes; the Overview says when to choose each. Omit variant and the field takes it from your style configuration, which is filled unless you have changed it.

Labels and hints⁠

label rests in the field's place and floats above the text once the field has focus or a value. supporting-text adds guidance below the field, and placeholder shows a hint only while the field is empty. The label names the field; the placeholder does not.

Icons⁠

leading-icon-name and trailing-icon-name take a Material Symbols name, and has-leading-icon and has-trailing-icon reserve the space. The field sets both itself from the icon names and slots; set them only when the field is rendered on a server. A slotted icon replaces the named one.

Badges⁠

A badge marks the field with a short value or a dot, for example the number of rules a password still fails. badge-value sets the text, badge-dot shows a dot instead, and badge-concealed hides the badge while keeping both settings.

Rules and errors⁠

required, minlength, maxlength, and pattern are checked when validation runs, not while the user types. The error appears when a form submits or reportValidity() is called from code, showing the browser's message as the field's error text. maxlength also adds a counter and stops further typing at the limit. Set error yourself to show an error your server found.

Forms⁠

The field submits value under name. autocomplete is the choice that matters most: current-password asks the browser's password manager to fill a saved password, and new-password asks it to suggest one.

The preview cannot submit a form, so the button below reports the click instead. A page of your own submits normally.

Disabled and read only⁠

disabled grays the field out and drops it from the Tab order; a disabled <fieldset> around it does the same. readonly keeps the field focusable and its text selectable, which suits a password a user may copy but not change.

Density⁠

density runs from 0, the standard height, to 4, the tightest. At 2 and above the filled variant hides its label, which stays the field's accessible name. The text variant ignores density. Omit it and the field takes the density from your style configuration, which is the standard 0 unless you have changed it.

Input mode⁠

inputmode picks the virtual keyboard a touch device offers. Omit it and the field takes the mode from your app configuration's password field setting, which is text unless you have changed it. A PIN suits numeric.

Text direction⁠

text-direction overrides the direction of the typed text. Leave it unset for the page's own direction, or choose LTR, RTL or auto, which follows the content.

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.
`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.
`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 Rules and errors.
`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()`.
`form`read-only		`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`hasLeadingIcon`	`has-leading-icon`	`boolean`default `false`	Whether the field reserves space for a leading icon. Set automatically from the `leading-icon` slot and `leadingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`hasTrailingIcon`	`has-trailing-icon`	`boolean`default `false`	Whether the field reserves space for a trailing icon. Set automatically from the `trailing-icon` slot and `trailingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`inputMode`	`inputmodenone`, `decimal`, `email`, `numeric`, `search`, `tel`, `text`, `url`	`InputModeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`, from the app configuration	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 Input mode.
`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 Labels and hints.
`labels`read-only		`NodeList`	The `<label>` elements associated with the element.
`leadingIconName`	`leading-icon-name`	`string`	A leading Material Symbols icon name. This is an alternative to using the `leading-icon` slot. If both are provided, the `leading-icon` slot will take precedence, and a warning will be logged. See Icons.
`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 Rules and errors.
`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 Rules and errors.
`name`	`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`pattern`	`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Rules and errors.
`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 Labels and hints.
`prefixText`	`prefix-text`	`string`	An optional prefix to display before the input value.
`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 Rules and errors.
`selectionEnd`		`number`	The position where the text selection ends.
`selectionStart`		`number`	The position where the text selection starts.
`suffixText`	`suffix-text`	`string`	An optional suffix to display after the input value.
`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 Labels and hints.
`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.
`trailingIconName`	`trailing-icon-name`	`string`	A trailing Material Symbols icon name. This is an alternative to using the `trailing-icon` slot. If both are provided, the `trailing-icon` slot will take precedence, and a warning will be logged. See Icons.
`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.
`leading-icon`	The leading icon, intended for a `cw-icon` or equivalent.
`trailing-icon`	The trailing icon, intended for a `cw-icon` or equivalent.

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().

Props⁠

Prop	Type	Description
`autocomplete`	`string`	Describes what, if any, type of autocomplete functionality the input should provide.See MDN: autocomplete attribute. See Forms.
`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.
`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 Rules and errors.
`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()`.
`form`read-only (ref)	`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`hasLeadingIcon`	`boolean`default `false`	Whether the field reserves space for a leading icon. Set automatically from the `slot="leading-icon"` child and `leadingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`hasTrailingIcon`	`boolean`default `false`	Whether the field reserves space for a trailing icon. Set automatically from the `slot="trailing-icon"` child and `trailingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`, from the app configuration	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 Input mode.
`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 Labels and hints.
`labels`read-only (ref)	`NodeList`	The `<label>` elements associated with the element.
`leadingIconName`	`string`	A leading Material Symbols icon name. This is an alternative to using the `slot="leading-icon"` child. If both are provided, the `slot="leading-icon"` child will take precedence, and a warning will be logged. See Icons.
`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 Rules and errors.
`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 Rules and errors.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Rules and errors.
`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 Labels and hints.
`prefixText`	`string`	An optional prefix to display before the input value.
`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 Rules and errors.
`selectionEnd`through the ref	`number`	The position where the text selection ends.
`selectionStart`through the ref	`number`	The position where the text selection starts.
`suffixText`	`string`	An optional suffix to display after the input value.
`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 Labels and hints.
`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.
`trailingIconName`	`string`	A trailing Material Symbols icon name. This is an alternative to using the `slot="trailing-icon"` child. If both are provided, the `slot="trailing-icon"` child will take precedence, and a warning will be logged. See Icons.
`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.
a child with `slot="leading-icon"`	The leading icon, intended for a `CrIcon` or equivalent.
a child with `slot="trailing-icon"`	The trailing icon, intended for a `CrIcon` or equivalent.

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().

Parameters⁠

Parameter	Type	Description
`Autocomplete`	`string?`	Describes what, if any, type of autocomplete functionality the input should provide.See MDN: autocomplete attribute. See Forms.
`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.
`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 Rules and errors.
`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()`.
`HasLeadingIcon`	`bool?`default `false`	Whether the field reserves space for a leading icon. Set automatically from the `LeadingIcon` render fragment and `LeadingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`HasTrailingIcon`	`bool?`default `false`	Whether the field reserves space for a trailing icon. Set automatically from the `TrailingIcon` render fragment and `TrailingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`InputMode`	`InputMode?InputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`, from the app configuration	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 Input mode.
`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 Labels and hints.
`LeadingIconName`	`string?`	A leading Material Symbols icon name. This is an alternative to using the `LeadingIcon` render fragment. If both are provided, the `LeadingIcon` render fragment will take precedence, and a warning will be logged. See Icons.
`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 Rules and errors.
`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 Rules and errors.
`Name`	`string?`	The name the element's value is submitted under with its form. See Forms.
`Pattern`	`string?`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Rules and errors.
`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 Labels and hints.
`PrefixText`	`string?`	An optional prefix to display before the input value.
`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 Rules and errors.
`SuffixText`	`string?`	An optional suffix to display after the input value.
`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 Labels and hints.
`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.
`TrailingIconName`	`string?`	A trailing Material Symbols icon name. This is an alternative to using the `TrailingIcon` render fragment. If both are provided, the `TrailingIcon` render fragment will take precedence, and a warning will be logged. See Icons.
`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.
`LeadingIcon`	`RenderFragment?`	The leading icon, intended for a `CbIcon` or equivalent.
`TrailingIcon`	`RenderFragment?`	The trailing icon, intended for a `CbIcon` or equivalent.

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.
`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.
`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 Rules and errors.
`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()`.
`hasLeadingIcon`	`boolean`default `false`	Whether the field reserves space for a leading icon. Set automatically from the `leading-icon` slot and `leadingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`hasTrailingIcon`	`boolean`default `false`	Whether the field reserves space for a trailing icon. Set automatically from the `trailing-icon` slot and `trailingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`, from the app configuration	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 Input mode.
`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 Labels and hints.
`leadingIconName`	`string`	A leading Material Symbols icon name. This is an alternative to using the `leading-icon` slot. If both are provided, the `leading-icon` slot will take precedence, and a warning will be logged. See Icons.
`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 Rules and errors.
`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 Rules and errors.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Rules and errors.
`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 Labels and hints.
`prefixText`	`string`	An optional prefix to display before the input value.
`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 Rules and errors.
`suffixText`	`string`	An optional suffix to display after the input value.
`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 Labels and hints.
`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.
`trailingIconName`	`string`	A trailing Material Symbols icon name. This is an alternative to using the `trailing-icon` slot. If both are provided, the `trailing-icon` slot will take precedence, and a warning will be logged. See Icons.
`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.
an element with `slot="leading-icon"`	The leading icon, intended for a `CaIcon` or equivalent.
an element with `slot="trailing-icon"`	The trailing icon, intended for a `CaIcon` or equivalent.

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.
`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.
`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 Rules and errors.
`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()`.
`hasLeadingIcon`	`boolean`default `false`	Whether the field reserves space for a leading icon. Set automatically from the `leading-icon` slot and `leadingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`hasTrailingIcon`	`boolean`default `false`	Whether the field reserves space for a trailing icon. Set automatically from the `trailing-icon` slot and `trailingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`, from the app configuration	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 Input mode.
`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 Labels and hints.
`leadingIconName`	`string`	A leading Material Symbols icon name. This is an alternative to using the `leading-icon` slot. If both are provided, the `leading-icon` slot will take precedence, and a warning will be logged. See Icons.
`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 Rules and errors.
`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 Rules and errors.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Rules and errors.
`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 Labels and hints.
`prefixText`	`string`	An optional prefix to display before the input value.
`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 Rules and errors.
`suffixText`	`string`	An optional suffix to display after the input value.
`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 Labels and hints.
`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.
`trailingIconName`	`string`	A trailing Material Symbols icon name. This is an alternative to using the `trailing-icon` slot. If both are provided, the `trailing-icon` slot will take precedence, and a warning will be logged. See Icons.
`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.
`leading-icon`	The leading icon, intended for a `CvIcon` or equivalent.
`trailing-icon`	The trailing icon, intended for a `CvIcon` or equivalent.

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.
`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.
`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 Rules and errors.
`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()`.
`hasLeadingIcon`	`boolean`default `false`	Whether the field reserves space for a leading icon. Set automatically from the `leadingIconSnippet` snippet and `leadingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`hasTrailingIcon`	`boolean`default `false`	Whether the field reserves space for a trailing icon. Set automatically from the `trailingIconSnippet` snippet and `trailingIconName`; set it yourself only when the field is rendered on the server. See Icons.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Text`, from the app configuration	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 Input mode.
`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 Labels and hints.
`leadingIconName`	`string`	A leading Material Symbols icon name. This is an alternative to using the `leadingIconSnippet` snippet. If both are provided, the `leadingIconSnippet` snippet will take precedence, and a warning will be logged. See Icons.
`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 Rules and errors.
`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 Rules and errors.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`pattern`	`string`	A regular expression that the field's value must match to pass constraint validation.See MDN: input pattern attribute. See Rules and errors.
`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 Labels and hints.
`prefixText`	`string`	An optional prefix to display before the input value.
`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 Rules and errors.
`suffixText`	`string`	An optional suffix to display after the input value.
`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 Labels and hints.
`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.
`trailingIconName`	`string`	A trailing Material Symbols icon name. This is an alternative to using the `trailingIconSnippet` snippet. If both are provided, the `trailingIconSnippet` snippet will take precedence, and a warning will be logged. See Icons.
`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.
`leadingIconSnippet`	The leading icon, intended for a `CsIcon` or equivalent.
`trailingIconSnippet`	The trailing icon, intended for a `CsIcon` or equivalent.

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 password field hides what is typed. No WAI-ARIA Authoring Practices pattern applies, because it behaves as a native text input.

The accessible name is label, or the field's aria-label when you set one.
Any aria-* attribute on the field other than aria-label, aria-describedby included, has no effect.
supporting-text, or error-text while the field is in error, and the maxlength counter form the input's description, read after its name.
A screen reader announces the field as invalid in the error state. In the filled and outlined variants, an error with error text is also announced when it appears.
required makes a screen reader announce the field as required and adds an asterisk to the visible label.
placeholder is a hint and never the name.
The text variant shows no label, supporting text or counter; label is only its accessible name.
An icon never names the field, because a slotted icon is hidden from assistive technology. Give an icon that does something its own button and accessible name.
Paste and a password manager's fill both work, so nobody has to remember or retype a password (WCAG 2.2 Accessible Authentication). The field has no show-password control.

Keyboard and focus⁠

Key	Action
Tab	Moves focus into the field, then on to the next control.
Shift+Tab	Moves focus back out of the field.
Enter	Commits an edited value with a `change` event, then submits the owning form.

Typing, deleting, and moving or selecting text are the native input's own behavior. Enter is the field's: with no owning form it does nothing, and during input method composition it is left to the input method.
Filled fields thicken their bottom indicator on focus, and outlined fields thicken their outline. The text variant draws a focus ring on the input.
disabled removes the field from the Tab order. readonly keeps it focusable and its text selectable.

Pointer and touch⁠

Measure the field at the density you ship against WCAG 2.5.8 (24 by 24 CSS pixels). Each level above 0 packs the field tighter, as the density example shows.

Display settings⁠

In forced-colors mode, a disabled field's label, text, supporting text and indicator take GrayText, an outlined field's border is redrawn as a real border, and the text variant's focus ring takes Highlight.
The label's float animation, 150 milliseconds long, does not follow the reduced-motion preference.
text-direction sets the direction of the typed text; with it unset, the page's direction applies.

Standards⁠

With its defaults, the password field meets two WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.4.7 Focus Visible (AA)

Four more depend on how you use it:

1.1.1 Non-text Content (A): give a slotted icon that does something an accessible name, and leave a decorative icon as it is.
1.3.5 Identify Input Purpose (AA): set autocomplete to current-password or new-password.
3.3.1 Error Identification (A): set error-text to say what is wrong and how to fix it.
3.3.2 Labels or Instructions (A): set label, and put the password rules in supporting-text.

Password field

Reference docs⁠link

Choosing a text field⁠link

Choosing a variant⁠link

Built in⁠link

Using password fields well⁠link

Theming fields⁠link

Variants⁠link

Labels and hints⁠link

Icons⁠link

Badges⁠link

Rules and errors⁠link

Forms⁠link

Disabled and read only⁠link

Density⁠link

Input mode⁠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 password fields well⁠

Theming fields⁠

Variants⁠

Labels and hints⁠

Icons⁠

Badges⁠

Rules and errors⁠

Forms⁠

Disabled and read only⁠

Density⁠

Input mode⁠

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⁠