Number field

A number field takes an exact quantity, price, or percentage in the format the reader's locale expects. Set a magnitude and people type 5 for five percent while your code still receives 0.05. Below, fields format prices, percentages, and measurements; press into one and the format gives way to plain digits, while a badge and an error come and go.

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 number field carries, from most to least:

Filled: a field that stands out among other content, such as the quantity on an order form.
Outlined: a quieter field that keeps a form with many numbers calm, such as a spreadsheet-style settings panel.
Text: a bare number with no container and no visible label, for a spot a surrounding surface already frames and names, such as a table cell or a toolbar.

Built in⁠

The field shows the number in the format of its locale and shows plain digits while you edit it.
magnitude lets people type a percentage or basis points while value keeps the raw fraction.
mode set to integer makes a whole-number field: digits-only keypad, a step of one, no decimals, and rounding when the edit ends.
min, max and step limit the number, and stepUp and stepDown move it from code.
prefix-text and suffix-text carry a currency or unit beside the number, outside the value.
badge-value adds a badge to the field with no separate element.
input-event-mode paces the input event, from every keystroke to an adaptive wait for your server (Input pacing).

Using number fields well⁠

Keep one variant within a form: filled or outlined.
Write the label as a name, such as "Quantity", and put guidance, such as the allowed range, in supporting-text.
Put a currency or unit in prefix-text or suffix-text, never in the label or typed into the value.
Explain an error in error-text, which replaces the supporting text while it shows.
Keep an identifier that only contains digits, such as a postal code or an account number, in a text field, which keeps the digits exactly as typed.

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 number fields only, set the token on the element in your own CSS:

cw-number-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⁠

variant sets how much emphasis the field carries, and label names it. Omit variant and the field takes the variant from your style configuration, which is filled unless you have changed it. The text variant has no visible label, so label there is only the accessible name. placeholder hints at the expected number while the field is empty.

Icons and units⁠

leading-icon-name and trailing-icon-name add a Material Symbols icon, and the field sets has-leading-icon and has-trailing-icon itself. Slotted icon content takes precedence over the name. prefix-text and suffix-text place a currency or unit beside the number without making it part of value.

Badges⁠

badge-value shows a short text on the field, and badge-dot turns it into a dot. badge-concealed hides either one and keeps its settings, so the same badge returns when you clear it.

Forms⁠

A number field takes part in its form: name is the key it submits under, and value is the plain dot-separated number it submits, whatever the display format. Enter submits the owning form, and autocomplete lets the browser fill a number that is personal data. The preview cannot submit a form, so this demo reports the click instead.

Validation⁠

required adds an asterisk to the label and an error when the field is empty at submit. supporting-text explains what to enter. error and error-text show an error you decide on, and error-text replaces the supporting text while it shows. readonly keeps the field focusable and selectable while blocking edits.

Disabled⁠

disabled makes the field uneditable. A disabled <fieldset> around the field disables it too.

Density⁠

density runs from 0 to 4 and sets how tightly the field is packed; omit it and the field takes standard from your style configuration unless you have changed it. At density 2 and above the filled variant hides its label, which stays the accessible name. The text variant ignores density.

Input pacing⁠

input-event-mode decides when the field fires input. immediate, the default, fires on every keystroke. debounced fires once typing pauses for input-rate-limit-delay, 300 milliseconds unless you set it, and throttled fires at most once per interval while typing continues. adaptive waits for a pause measured from how this user types and how fast asyncSink answers, never shorter than input-rate-limit-delay. Only the event waits: value is current on every keystroke.

asyncSink and sink-duty-cycle work as on the text field. Event pacing compares the modes across every component that paces an event.

Input mode⁠

inputmode picks the virtual keyboard a phone offers; the effect shows on a touch device. Omit it and the field takes the keyboard from your app configuration, which is decimal for a number field unless you have changed it. A field in integer mode takes the numeric keyboard instead, and an explicit inputmode overrides both.

Magnitude⁠

magnitude scales what people read and type while value keeps the raw number. With percent, a stored 0.05 shows and edits as 5, and basis-points shows it as 500. Read the raw number with valueAsNumber.

Mode⁠

mode states what kind of number the field takes. integer derives a numeric keypad, a step of one and no decimals, then rounds to a whole number, away from zero, when the edit ends. Type 3.5 in the second field and leave it: the 3.5 becomes 4.

Text direction⁠

text-direction sets the reading direction of the number text. Use it where a right-to-left language writes its numbers left to right, or the reverse.

Format and locale⁠

locale is a BCP 47 language tag that sets the separators; empty means the browser's preferred language. decimal-places fixes how many decimals show, and rounded also rounds the stored number to them.

Range and step⁠

min and max bound the number, and step sets the grid between them. stepUp and stepDown move the value along that grid from code and stop at the bounds. The buttons in the demo set the value to the ends and middle of the grid.

Properties⁠

Property	Attribute	Type	Description
`asyncSink`		`ValueChangeSink`	The async work, such as a request to a server, that the field paces `input` against. It is called whenever the field delivers an `input` event, in every mode, and `Adaptive` also uses it to set how soon the next one comes. A slow sink is asked less often, and is not called once per keystroke. Read the field's value inside it, as an `input` listener would. See Input pacing.
`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.
`decimalPlaces`	`decimal-places`	`number`default `-1`	The number of decimal places to display, always shown in full. -1 uses the locale's default of up to three. See Format and locale.
`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.
`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.
`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 and units.
`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 and units.
`inputEventMode`	`input-event-modeimmediate`, `adaptive`, `debounced`, `throttled`	`InputEventModeInputEventMode.Immediate`, `.Adaptive`, `.Debounced`, `.Throttled`default `InputEventMode.Immediate`	When the field fires `input`. `Debounced` and `Throttled` pace it by `inputRateLimitDelay`, and `Adaptive` paces it to the user's own typing rhythm and to what `asyncSink` can keep up with. A cleared or unrecognized value is treated as the field's default. See Input pacing.
`inputMode`	`inputmodenone`, `decimal`, `email`, `numeric`, `search`, `tel`, `text`, `url`	`InputModeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Decimal`, 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.
`inputRateLimitDelay`	`input-rate-limit-delay`	`number`default `300`	The pacing interval for `input`, in milliseconds: the pause after the last keystroke for `Debounced`, the minimum gap between events for `Throttled`, and the shortest allowed pause for `Adaptive`. `Immediate` ignores it. A value that is not a finite number is treated as the default, and a negative one as 0. See Input pacing.
`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.
`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 and units.
`locale`	`locale`	`string`	The BCP 47 locale the field formats its values with, and translates its screen-reader announcements into. Empty means the application's configured locale (`AppConfiguration.locale`), or the browser's preferred language when it sets none. See Format and locale.
`magnitude`	`magnitudebasis-points`, `normal`, `percent`	`NumberFieldMagnitudeNumberFieldMagnitude.BasisPoints`, `.Normal`, `.Percent`default `NumberFieldMagnitude.Normal`	Scales the displayed and edited number while the `value` property stays raw: `percent` displays ×100, `basis-points` displays ×10,000 (a stored `0.05` shows and edits as `5` with percent magnitude). See Magnitude.
`max`	`max`	`number`	The greatest value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input max attribute. See Range and step.
`min`	`min`	`number`	The least value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input min attribute. See Range and step.
`mode`	`modedecimal`, `integer`	`NumberFieldModeNumberFieldMode.Decimal`, `.Integer`default `NumberFieldMode.Decimal`	What kind of number the field takes: `decimal`, or `integer` for a quantity that can only be a whole number. An integer field offers the numeric keyboard with no decimal key, steps by 1, shows no decimal places, limits `min` and `max` to whole numbers, and rounds a typed value to a whole number, away from zero, when the user leaves the field. At the normal magnitude only, it also sets the step and the whole-number limits. An `inputmode`, `step` or `decimal-places` you set yourself is used instead of the derived one. Under a scaled `magnitude` the mode applies to the displayed number: percent with integer shows whole percentages. See Mode.
`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.
`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 Variants.
`prefixText`	`prefix-text`	`string`	An optional prefix to display before the input value. See Icons and units.
`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 Validation.
`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.
`rounded`	`rounded`	`boolean`default `false`	Whether `value` is rounded to the displayed decimal places. Has no effect while `decimalPlaces` is -1. See Format and locale.
`selectionEnd`		`number`	The position where the text selection ends.
`selectionStart`		`number`	The position where the text selection starts.
`sinkDutyCycle`	`sink-duty-cycle`	`number`default `1`	The share of the sink's time this field may occupy, above 0 and up to 1, in every input event mode. At 1 the next call goes out as soon as the last one finishes; at 0.25 the field leaves three quarters of the time idle. A value below 0.01 is treated as 0.01, and an assignment outside the range is ignored. See Input pacing.
`step`	`step`	`number`	The increment that permitted values step by, anchored at `min`. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input step attribute. See Range and step.
`suffixText`	`suffix-text`	`string`	An optional suffix to display after the input value. See Icons and units.
`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 Validation.
`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 and units.
`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 Icons and units, Forms, Input pacing, Magnitude.
`valueAsNumber`		`number`	The field's value as a number, mirroring `HTMLInputElement.valueAsNumber`: `NaN` when the value is empty or unparseable, and setting `NaN` clears it. As on the platform, empty and invalid are indistinguishable.Reads the raw `value`, not the displayed text, so under a scaled `magnitude` a stored `0.05` reads as `0.05`, not `5`. Assigning an infinite number throws a `TypeError`. See Magnitude.
`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.

Under a percent magnitude the default step of 1 moves the number by 100 points, so set a step in raw units.

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.

On Enter, an edited value fires change once before the form submits, and blur then fires no second change.

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().
`stepDown(n?: number)`	`void`	Decrements the value by `n` steps, snapped to the step grid from `min` (or 0) and clamped to `min`/`max`. Throws an `InvalidStateError` when the `step` attribute is `any`. Unlike `stepDown()` on an `<input type="number">`, the grid never starts from the `value` attribute.
`stepUp(n?: number)`	`void`	Increments the value by `n` steps, snapped to the step grid from `min` (or 0) and clamped to `min`/`max`. Throws an `InvalidStateError` when the `step` attribute is `any`. Unlike `stepUp()` on an `<input type="number">`, the grid never starts from the `value` attribute.

Props⁠

Prop	Type	Description
`asyncSink`	`ValueChangeSink`	The async work, such as a request to a server, that the field paces `input` against. It is called whenever the field delivers an `input` event, in every mode, and `Adaptive` also uses it to set how soon the next one comes. A slow sink is asked less often, and is not called once per keystroke. Read the field's value inside it, as an `input` listener would. See Input pacing.
`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.
`decimalPlaces`	`number`default `-1`	The number of decimal places to display, always shown in full. -1 uses the locale's default of up to three. See Format and locale.
`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.
`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.
`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 and units.
`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 and units.
`inputEventMode`	`InputEventModeTypeInputEventMode.Immediate`, `.Adaptive`, `.Debounced`, `.Throttled`default `InputEventMode.Immediate`	When the field fires `input`. `Debounced` and `Throttled` pace it by `inputRateLimitDelay`, and `Adaptive` paces it to the user's own typing rhythm and to what `asyncSink` can keep up with. A cleared or unrecognized value is treated as the field's default. See Input pacing.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Decimal`, 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.
`inputRateLimitDelay`	`number`default `300`	The pacing interval for `input`, in milliseconds: the pause after the last keystroke for `Debounced`, the minimum gap between events for `Throttled`, and the shortest allowed pause for `Adaptive`. `Immediate` ignores it. A value that is not a finite number is treated as the default, and a negative one as 0. See Input pacing.
`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.
`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 and units.
`locale`	`string`	The BCP 47 locale the field formats its values with, and translates its screen-reader announcements into. Empty means the application's configured locale (`AppConfiguration.locale`), or the browser's preferred language when it sets none. See Format and locale.
`magnitude`	`NumberFieldMagnitudeTypeNumberFieldMagnitude.BasisPoints`, `.Normal`, `.Percent`default `NumberFieldMagnitude.Normal`	Scales the displayed and edited number while the `value` prop stays raw: `percent` displays ×100, `basis-points` displays ×10,000 (a stored `0.05` shows and edits as `5` with percent magnitude). See Magnitude.
`max`	`number`	The greatest value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input max attribute. See Range and step.
`min`	`number`	The least value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input min attribute. See Range and step.
`mode`	`NumberFieldModeTypeNumberFieldMode.Decimal`, `.Integer`default `NumberFieldMode.Decimal`	What kind of number the field takes: `decimal`, or `integer` for a quantity that can only be a whole number. An integer field offers the numeric keyboard with no decimal key, steps by 1, shows no decimal places, limits `min` and `max` to whole numbers, and rounds a typed value to a whole number, away from zero, when the user leaves the field. At the normal magnitude only, it also sets the step and the whole-number limits. An `inputMode`, `step` or `decimalPlaces` you set yourself is used instead of the derived one. Under a scaled `magnitude` the mode applies to the displayed number: percent with integer shows whole percentages. See Mode.
`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.
`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 Variants.
`prefixText`	`string`	An optional prefix to display before the input value. See Icons and units.
`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 Validation.
`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.
`rounded`	`boolean`default `false`	Whether `value` is rounded to the displayed decimal places. Has no effect while `decimalPlaces` is -1. See Format and locale.
`selectionEnd`through the ref	`number`	The position where the text selection ends.
`selectionStart`through the ref	`number`	The position where the text selection starts.
`sinkDutyCycle`	`number`default `1`	The share of the sink's time this field may occupy, above 0 and up to 1, in every input event mode. At 1 the next call goes out as soon as the last one finishes; at 0.25 the field leaves three quarters of the time idle. A value below 0.01 is treated as 0.01, and an assignment outside the range is ignored. See Input pacing.
`step`	`number`	The increment that permitted values step by, anchored at `min`. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input step attribute. See Range and step.
`suffixText`	`string`	An optional suffix to display after the input value. See Icons and units.
`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 Validation.
`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 and units.
`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 Icons and units, Forms, Input pacing, Magnitude.
`valueAsNumber`through the ref	`number`	The field's value as a number, mirroring `HTMLInputElement.valueAsNumber`: `NaN` when the value is empty or unparseable, and setting `NaN` clears it. As on the platform, empty and invalid are indistinguishable.Reads the raw `value`, not the displayed text, so under a scaled `magnitude` a stored `0.05` reads as `0.05`, not `5`. Assigning an infinite number throws a `TypeError`. See Magnitude.
`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.

Under a percent magnitude the default step of 1 moves the number by 100 points, so set a step in raw units.

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.

On Enter, an edited value fires change once before the form submits, and blur then fires no second change.

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().
`stepDown(n?: number)`	`void`	Decrements the value by `n` steps, snapped to the step grid from `min` (or 0) and clamped to `min`/`max`. Throws an `InvalidStateError` when the `step` attribute is `any`. Unlike `stepDown()` on an `<input type="number">`, the grid never starts from the `value` attribute.
`stepUp(n?: number)`	`void`	Increments the value by `n` steps, snapped to the step grid from `min` (or 0) and clamped to `min`/`max`. Throws an `InvalidStateError` when the `step` attribute is `any`. Unlike `stepUp()` on an `<input type="number">`, the grid never starts from the `value` attribute.

Parameters⁠

Parameter	Type	Description
`AsyncSink`	`ValueChangeSink?`	The async work, such as a request to a server, that the field paces `input` against. It is called whenever the field delivers an `input` event, in every mode, and `Adaptive` also uses it to set how soon the next one comes. A slow sink is asked less often, and is not called once per keystroke. Read the field's value inside it, as an `input` listener would. See Input pacing.
`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.
`DecimalPlaces`	`int?`default `-1`	The number of decimal places to display, always shown in full. -1 uses the locale's default of up to three. See Format and locale.
`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.
`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.
`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 and units.
`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 and units.
`InputEventMode`	`InputEventMode?InputEventMode.Immediate`, `.Adaptive`, `.Debounced`, `.Throttled`default `InputEventMode.Immediate`	When the field fires `input`. `Debounced` and `Throttled` pace it by `InputRateLimitDelay`, and `Adaptive` paces it to the user's own typing rhythm and to what `AsyncSink` can keep up with. A cleared or unrecognized value is treated as the field's default. See Input pacing.
`InputMode`	`InputMode?InputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Decimal`, 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.
`InputRateLimitDelay`	`int?`default `300`	The pacing interval for `input`, in milliseconds: the pause after the last keystroke for `Debounced`, the minimum gap between events for `Throttled`, and the shortest allowed pause for `Adaptive`. `Immediate` ignores it. A value that is not a finite number is treated as the default, and a negative one as 0. See Input pacing.
`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.
`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 and units.
`Locale`	`string?`	The BCP 47 locale the field formats its values with, and translates its screen-reader announcements into. Empty means the application's configured locale (`AppConfiguration.locale`), or the browser's preferred language when it sets none. See Format and locale.
`Magnitude`	`NumberFieldMagnitude?NumberFieldMagnitude.BasisPoints`, `.Normal`, `.Percent`default `NumberFieldMagnitude.Normal`	Scales the displayed and edited number while the `Value` parameter stays raw: `percent` displays ×100, `basis-points` displays ×10,000 (a stored `0.05` shows and edits as `5` with percent magnitude). See Magnitude.
`Max`	`decimal?`	The greatest value in the range of permitted values. Under a scaled `Magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input max attribute. See Range and step.
`Min`	`decimal?`	The least value in the range of permitted values. Under a scaled `Magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input min attribute. See Range and step.
`Mode`	`NumberFieldMode?NumberFieldMode.Decimal`, `.Integer`default `NumberFieldMode.Decimal`	What kind of number the field takes: `decimal`, or `integer` for a quantity that can only be a whole number. An integer field offers the numeric keyboard with no decimal key, steps by 1, shows no decimal places, limits `Min` and `Max` to whole numbers, and rounds a typed value to a whole number, away from zero, when the user leaves the field. At the normal magnitude only, it also sets the step and the whole-number limits. An `InputMode`, `Step` or `DecimalPlaces` you set yourself is used instead of the derived one. Under a scaled `Magnitude` the mode applies to the displayed number: percent with integer shows whole percentages. See Mode.
`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.
`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 Variants.
`PrefixText`	`string?`	An optional prefix to display before the input value. See Icons and units.
`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 Validation.
`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.
`Rounded`	`bool?`default `false`	Whether `Value` is rounded to the displayed decimal places. Has no effect while `DecimalPlaces` is -1. See Format and locale.
`SinkDutyCycle`	`double?`default `1`	The share of the sink's time this field may occupy, above 0 and up to 1, in every input event mode. At 1 the next call goes out as soon as the last one finishes; at 0.25 the field leaves three quarters of the time idle. A value below 0.01 is treated as 0.01, and an assignment outside the range is ignored. See Input pacing.
`Step`	`decimal?`	The increment that permitted values step by, anchored at `Min`. Under a scaled `Magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input step attribute. See Range and step.
`SuffixText`	`string?`	An optional suffix to display after the input value. See Icons and units.
`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 Validation.
`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 and units.
`Value`	`decimal?`	The field's current value, always as a string. See Icons and units, Forms, Input pacing, Magnitude.
`ValueExpression`	`Expression<Func<decimal?>>?`	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.

Under a percent magnitude the default step of 1 moves the number by 100 points, so set a step in raw units.

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.

On Enter, an edited value fires change once before the form submits, and blur then fires no second change.

Inputs⁠

Input	Type	Description
`asyncSink`	`ValueChangeSink`	The async work, such as a request to a server, that the field paces `input` against. It is called whenever the field delivers an `input` event, in every mode, and `Adaptive` also uses it to set how soon the next one comes. A slow sink is asked less often, and is not called once per keystroke. Read the field's value inside it, as an `input` listener would. See Input pacing.
`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.
`decimalPlaces`	`number`default `-1`	The number of decimal places to display, always shown in full. -1 uses the locale's default of up to three. See Format and locale.
`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.
`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.
`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 and units.
`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 and units.
`inputEventMode`	`InputEventModeTypeInputEventMode.Immediate`, `.Adaptive`, `.Debounced`, `.Throttled`default `InputEventMode.Immediate`	When the field fires `input`. `Debounced` and `Throttled` pace it by `inputRateLimitDelay`, and `Adaptive` paces it to the user's own typing rhythm and to what `asyncSink` can keep up with. A cleared or unrecognized value is treated as the field's default. See Input pacing.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Decimal`, 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.
`inputRateLimitDelay`	`number`default `300`	The pacing interval for `input`, in milliseconds: the pause after the last keystroke for `Debounced`, the minimum gap between events for `Throttled`, and the shortest allowed pause for `Adaptive`. `Immediate` ignores it. A value that is not a finite number is treated as the default, and a negative one as 0. See Input pacing.
`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.
`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 and units.
`locale`	`string`	The BCP 47 locale the field formats its values with, and translates its screen-reader announcements into. Empty means the application's configured locale (`AppConfiguration.locale`), or the browser's preferred language when it sets none. See Format and locale.
`magnitude`	`NumberFieldMagnitudeTypeNumberFieldMagnitude.BasisPoints`, `.Normal`, `.Percent`default `NumberFieldMagnitude.Normal`	Scales the displayed and edited number while the `value` input stays raw: `percent` displays ×100, `basis-points` displays ×10,000 (a stored `0.05` shows and edits as `5` with percent magnitude). See Magnitude.
`max`	`number`	The greatest value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input max attribute. See Range and step.
`min`	`number`	The least value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input min attribute. See Range and step.
`mode`	`NumberFieldModeTypeNumberFieldMode.Decimal`, `.Integer`default `NumberFieldMode.Decimal`	What kind of number the field takes: `decimal`, or `integer` for a quantity that can only be a whole number. An integer field offers the numeric keyboard with no decimal key, steps by 1, shows no decimal places, limits `min` and `max` to whole numbers, and rounds a typed value to a whole number, away from zero, when the user leaves the field. At the normal magnitude only, it also sets the step and the whole-number limits. An `inputMode`, `step` or `decimalPlaces` you set yourself is used instead of the derived one. Under a scaled `magnitude` the mode applies to the displayed number: percent with integer shows whole percentages. See Mode.
`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.
`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 Variants.
`prefixText`	`string`	An optional prefix to display before the input value. See Icons and units.
`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 Validation.
`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.
`rounded`	`boolean`default `false`	Whether `value` is rounded to the displayed decimal places. Has no effect while `decimalPlaces` is -1. See Format and locale.
`sinkDutyCycle`	`number`default `1`	The share of the sink's time this field may occupy, above 0 and up to 1, in every input event mode. At 1 the next call goes out as soon as the last one finishes; at 0.25 the field leaves three quarters of the time idle. A value below 0.01 is treated as 0.01, and an assignment outside the range is ignored. See Input pacing.
`step`	`number`	The increment that permitted values step by, anchored at `min`. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input step attribute. See Range and step.
`suffixText`	`string`	An optional suffix to display after the input value. See Icons and units.
`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 Validation.
`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 and units.
`value`	`string`	The field's current value, always as a string. See Icons and units, Forms, Input pacing, Magnitude.
`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.

Under a percent magnitude the default step of 1 moves the number by 100 points, so set a step in raw units.

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.

On Enter, an edited value fires change once before the form submits, and blur then fires no second change.

Props⁠

Prop	Type	Description
`asyncSink`	`ValueChangeSink`	The async work, such as a request to a server, that the field paces `input` against. It is called whenever the field delivers an `input` event, in every mode, and `Adaptive` also uses it to set how soon the next one comes. A slow sink is asked less often, and is not called once per keystroke. Read the field's value inside it, as an `input` listener would. See Input pacing.
`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.
`decimalPlaces`	`number`default `-1`	The number of decimal places to display, always shown in full. -1 uses the locale's default of up to three. See Format and locale.
`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.
`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.
`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 and units.
`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 and units.
`inputEventMode`	`InputEventModeTypeInputEventMode.Immediate`, `.Adaptive`, `.Debounced`, `.Throttled`default `InputEventMode.Immediate`	When the field fires `input`. `Debounced` and `Throttled` pace it by `inputRateLimitDelay`, and `Adaptive` paces it to the user's own typing rhythm and to what `asyncSink` can keep up with. A cleared or unrecognized value is treated as the field's default. See Input pacing.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Decimal`, 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.
`inputRateLimitDelay`	`number`default `300`	The pacing interval for `input`, in milliseconds: the pause after the last keystroke for `Debounced`, the minimum gap between events for `Throttled`, and the shortest allowed pause for `Adaptive`. `Immediate` ignores it. A value that is not a finite number is treated as the default, and a negative one as 0. See Input pacing.
`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.
`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 and units.
`locale`	`string`	The BCP 47 locale the field formats its values with, and translates its screen-reader announcements into. Empty means the application's configured locale (`AppConfiguration.locale`), or the browser's preferred language when it sets none. See Format and locale.
`magnitude`	`NumberFieldMagnitudeTypeNumberFieldMagnitude.BasisPoints`, `.Normal`, `.Percent`default `NumberFieldMagnitude.Normal`	Scales the displayed and edited number while the `value` prop stays raw: `percent` displays ×100, `basis-points` displays ×10,000 (a stored `0.05` shows and edits as `5` with percent magnitude). See Magnitude.
`max`	`number`	The greatest value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input max attribute. See Range and step.
`min`	`number`	The least value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input min attribute. See Range and step.
`mode`	`NumberFieldModeTypeNumberFieldMode.Decimal`, `.Integer`default `NumberFieldMode.Decimal`	What kind of number the field takes: `decimal`, or `integer` for a quantity that can only be a whole number. An integer field offers the numeric keyboard with no decimal key, steps by 1, shows no decimal places, limits `min` and `max` to whole numbers, and rounds a typed value to a whole number, away from zero, when the user leaves the field. At the normal magnitude only, it also sets the step and the whole-number limits. An `inputMode`, `step` or `decimalPlaces` you set yourself is used instead of the derived one. Under a scaled `magnitude` the mode applies to the displayed number: percent with integer shows whole percentages. See Mode.
`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.
`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 Variants.
`prefixText`	`string`	An optional prefix to display before the input value. See Icons and units.
`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 Validation.
`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.
`rounded`	`boolean`default `false`	Whether `value` is rounded to the displayed decimal places. Has no effect while `decimalPlaces` is -1. See Format and locale.
`sinkDutyCycle`	`number`default `1`	The share of the sink's time this field may occupy, above 0 and up to 1, in every input event mode. At 1 the next call goes out as soon as the last one finishes; at 0.25 the field leaves three quarters of the time idle. A value below 0.01 is treated as 0.01, and an assignment outside the range is ignored. See Input pacing.
`step`	`number`	The increment that permitted values step by, anchored at `min`. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input step attribute. See Range and step.
`suffixText`	`string`	An optional suffix to display after the input value. See Icons and units.
`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 Validation.
`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 and units.
`value`	`string`	The field's current value, always as a string. See Icons and units, Forms, Input pacing, Magnitude.
`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.

Under a percent magnitude the default step of 1 moves the number by 100 points, so set a step in raw units.

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.

On Enter, an edited value fires change once before the form submits, and blur then fires no second change.

Props⁠

Prop	Type	Description
`asyncSink`	`ValueChangeSink`	The async work, such as a request to a server, that the field paces `input` against. It is called whenever the field delivers an `input` event, in every mode, and `Adaptive` also uses it to set how soon the next one comes. A slow sink is asked less often, and is not called once per keystroke. Read the field's value inside it, as an `input` listener would. See Input pacing.
`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.
`decimalPlaces`	`number`default `-1`	The number of decimal places to display, always shown in full. -1 uses the locale's default of up to three. See Format and locale.
`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.
`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.
`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 and units.
`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 and units.
`inputEventMode`	`InputEventModeTypeInputEventMode.Immediate`, `.Adaptive`, `.Debounced`, `.Throttled`default `InputEventMode.Immediate`	When the field fires `input`. `Debounced` and `Throttled` pace it by `inputRateLimitDelay`, and `Adaptive` paces it to the user's own typing rhythm and to what `asyncSink` can keep up with. A cleared or unrecognized value is treated as the field's default. See Input pacing.
`inputMode`	`InputModeTypeInputMode.None`, `.Decimal`, `.Email`, `.Numeric`, `.Search`, `.Tel`, `.Text`, `.Url`default `InputMode.Decimal`, 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.
`inputRateLimitDelay`	`number`default `300`	The pacing interval for `input`, in milliseconds: the pause after the last keystroke for `Debounced`, the minimum gap between events for `Throttled`, and the shortest allowed pause for `Adaptive`. `Immediate` ignores it. A value that is not a finite number is treated as the default, and a negative one as 0. See Input pacing.
`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.
`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 and units.
`locale`	`string`	The BCP 47 locale the field formats its values with, and translates its screen-reader announcements into. Empty means the application's configured locale (`AppConfiguration.locale`), or the browser's preferred language when it sets none. See Format and locale.
`magnitude`	`NumberFieldMagnitudeTypeNumberFieldMagnitude.BasisPoints`, `.Normal`, `.Percent`default `NumberFieldMagnitude.Normal`	Scales the displayed and edited number while the `value` prop stays raw: `percent` displays ×100, `basis-points` displays ×10,000 (a stored `0.05` shows and edits as `5` with percent magnitude). See Magnitude.
`max`	`number`	The greatest value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input max attribute. See Range and step.
`min`	`number`	The least value in the range of permitted values. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input min attribute. See Range and step.
`mode`	`NumberFieldModeTypeNumberFieldMode.Decimal`, `.Integer`default `NumberFieldMode.Decimal`	What kind of number the field takes: `decimal`, or `integer` for a quantity that can only be a whole number. An integer field offers the numeric keyboard with no decimal key, steps by 1, shows no decimal places, limits `min` and `max` to whole numbers, and rounds a typed value to a whole number, away from zero, when the user leaves the field. At the normal magnitude only, it also sets the step and the whole-number limits. An `inputMode`, `step` or `decimalPlaces` you set yourself is used instead of the derived one. Under a scaled `magnitude` the mode applies to the displayed number: percent with integer shows whole percentages. See Mode.
`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.
`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 Variants.
`prefixText`	`string`	An optional prefix to display before the input value. See Icons and units.
`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 Validation.
`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.
`rounded`	`boolean`default `false`	Whether `value` is rounded to the displayed decimal places. Has no effect while `decimalPlaces` is -1. See Format and locale.
`sinkDutyCycle`	`number`default `1`	The share of the sink's time this field may occupy, above 0 and up to 1, in every input event mode. At 1 the next call goes out as soon as the last one finishes; at 0.25 the field leaves three quarters of the time idle. A value below 0.01 is treated as 0.01, and an assignment outside the range is ignored. See Input pacing.
`step`	`number`	The increment that permitted values step by, anchored at `min`. Under a scaled `magnitude` it is in raw units, not displayed ones. `undefined` when unset (not `0`, not `NaN`).See MDN: input step attribute. See Range and step.
`suffixText`	`string`	An optional suffix to display after the input value. See Icons and units.
`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 Validation.
`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 and units.
`value`	`string`	The field's current value, always as a string. See Icons and units, Forms, Input pacing, Magnitude.
`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.

Under a percent magnitude the default step of 1 moves the number by 100 points, so set a step in raw units.

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.

On Enter, an edited value fires change once before the form submits, and blur then fires no second change.

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 screen reader announces a number field as a text box at rest and as a spin button while you edit it. The editing state follows the WAI-ARIA Authoring Practices: Spinbutton pattern.

The accessible name is the aria-label when set, and otherwise label. The text variant shows no label, so give it a label all the same.
aria-label is the only ARIA attribute that changes what a screen reader announces. Any other aria-* attribute you set, aria-describedby included, has no effect.
The announced description is the supporting text, or the error text while the field is in error.
The field is announced as invalid in the error state, which is error or an error reported by validation. In the filled and outlined variants an error with error text is announced when it appears.
required is announced as required and adds an asterisk to the visible label.
prefix-text and suffix-text are plain text beside the input. They are not in the name or the description, so repeat a unit in label or supporting-text where the number alone is unclear.
Screen readers skip an icon, so it never names the field. An icon that does something should be a button in the slot, with its own name.
A badge is visual only; nothing announces it.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the field and away from it.
Arrow Up	While editing, raises the number by `step`.
Arrow Down	While editing, lowers the number by `step`.
Enter	Commits an edit and submits the owning form.

Arrow Up and Arrow Down work as soon as the field takes focus. Text entry, selection, and Enter during text composition follow the platform.
A field with no form does nothing on Enter.
Focus thickens the bottom line of the filled variant and the outline of the outlined variant. The text variant shows a focus ring.
disabled removes the field from the Tab order. readonly keeps it focusable and its text selectable.

Pointer and touch⁠

The visible field is the touch target. Its height follows density, shown in Density; keep the field at least 24 by 24 pixels, the minimum in WCAG 2.5.8.

Display settings⁠

Forced colors: a disabled field'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.
Reduced motion: the label's float animation runs for 150 milliseconds whatever the setting.
Right-to-left: text-direction sets the reading direction of the number text, so a right-to-left language that writes numbers left to right can say so. The field does not take it from the page.

Standards⁠

With its defaults, a number field meets two WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.4.7 Focus Visible (AA)

Five more depend on how you use it, each with the one thing you do:

1.1.1 Non-text Content (A): give a slotted image an alt, or mark a decorative one.
1.3.5 Identify Input Purpose (AA): set autocomplete when the number is personal data the browser can fill.
2.5.8 Target Size, Minimum (AA): keep the field at least 24 by 24 pixels.
3.3.1 Error Identification (A): set error-text so the message says what is wrong.
3.3.2 Labels or Instructions (A): set label on every field, the text variant included.

Number field

Reference docs⁠link

Choosing a text field⁠link

Choosing a variant⁠link

Built in⁠link

Using number fields well⁠link

Theming fields⁠link

Variants⁠link

Icons and units⁠link

Badges⁠link

Forms⁠link

Validation⁠link

Disabled⁠link

Density⁠link

Input pacing⁠link

Input mode⁠link

Magnitude⁠link

Mode⁠link

Text direction⁠link

Format and locale⁠link

Range and step⁠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 number fields well⁠

Theming fields⁠

Variants⁠

Icons and units⁠

Badges⁠

Forms⁠

Validation⁠

Disabled⁠

Density⁠

Input pacing⁠

Input mode⁠

Magnitude⁠

Mode⁠

Text direction⁠

Format and locale⁠

Range and step⁠

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⁠