TextField

Text fields let people enter text into a UI.

Overview Api

Developer experience

Supports controlled (value) and uncontrolled (defaultValue) usage.
multiline switches to an auto-growing textarea.
type="select" switches to select mode with options or projected MenuItem children.
type="date" switches to date-picker mode; the field stays typable (YYYY-MM-DD).
mask transforms typed/pasted input on every keystroke (a card number, a phone number, an ID); it defaults to the built-in YYYY-MM-DD mask for type="date", and providing one overrides it.
The outlined variant's legend notch uses one @udixio/core/dom Anime.js Layout controller, shared with the Angular adapter -- an accepted exception to the rest of @udixio/core/dom, which uses Motion; Motion has no free equivalent to width: auto layout diffing. The floating label itself is a plain CSS transition.

Accessibility

aria-describedby links supporting text/error to the input.
aria-invalid reflects errorText.

Known limitations

ref targets the underlying <input>/<textarea>, not the field's root element.

Props

React props
Name	Type	Required	Default	Description
`label`	`string`	Yes	`—`	Field label, floated above the value or notched into the outlined legend.
`leadingIcon`	`Icon`	No	`—`	Optional icon shown before the value.
`supportingText`	`string`	No	`—`	Message shown below the field.
`trailingIcon`	`Icon`	No	`—`	Optional icon shown after the value. Defaults to a calendar indicator for `type="date"` and a chevron indicator for `type="select"`.
`suffix`	`string`	No	`—`	Static text appended after the value, for example a unit. Hidden while an error icon is shown.
`type`	`TextFieldType`	No	`'text'`	Native input kind, or a UI mode: `'date'` opens a date picker and `'select'` opens a menu of `options`.
`className`	`string \| Partial<Record<"content" \| "input" \| "label" \| "legend" \| "stateLayer" \| "activeIndicator" \| "leadingIcon" \| "supportingText" \| "textField" \| "trailingIcon" \| "suffix", string>> \| ClassNameComponent<...>`	No	`—`	Root classes (string), static element classes (object), or state-aware element classes (function).
`defaultValue`	`string`	No	`—`	Initial value for uncontrolled usage.
`autoFocus`	`boolean`	No	`—`	Focuses the field once, on mount.
`id`	`string`	No	`—`	Id of the underlying form control. Auto-generated if not provided.
`onFocus`	`() => void`	No	`—`	Fires when the underlying control gains focus.
`onBlur`	`() => void`	No	`—`	Fires when the underlying control loses focus.
`onChange`	`(value: string) => void`	No	`—`	Called once for each accepted value transition.
`variant`	`TextFieldVariant`	No	`'filled'`	Visual style.
`multiline`	`boolean`	No	`false`	Switches to an auto-growing multiline textarea.
`value`	`string`	No	`—`	Controlled value. Providing it makes the field controlled for its lifetime.
`disabled`	`boolean`	No	`false`	Prevents interaction and form submission.
`name`	`string`	No	`—`	Name of the underlying form control.
`placeholder`	`string`	No	`—`	Placeholder shown only while the field is focused and empty.
`autoComplete`	`string`	No	`'on'`	Native autocomplete hint.
`errorText`	`string`	No	`—`	Error message. Also switches the field to its error color treatment and shows an error icon.
`showSupportingText`	`boolean`	No	computed from `errorText`/`supportingText`	Forces the supporting text row.
`mask`	`(raw: string) => string`	No	`—`	Transforms typed or pasted input into the value, on every keystroke -- for example inserting separators as digits accumulate, or rejecting characters outside an expected format (a card number, a phone number, an ID). Defaults to the built-in `YYYY-MM-DD` mask (`sanitizeTextFieldDateInput`) for `type="date"`; unset for every other type. Providing one for `type="date"` replaces the built-in mask. Must be idempotent (`mask(mask(x)) === mask(x)`): the field is controlled, so `mask` receives its own previous output back as `raw` on every subsequent keystroke. A literal you inject (a `+33` country code, a fixed digit group) will be mistaken for freshly typed input on the next call unless you strip it back out first -- inserted separators that aren't valid data characters (a `-`, a space) don't need this, since a naive filter already excludes them.
`min`	`string \| number`	No	`—`	Native lower bound forwarded to the underlying input.
`max`	`string \| number`	No	`—`	Native upper bound forwarded to the underlying input.
`step`	`string \| number`	No	`—`	Native increment forwarded to the underlying input.