Components

TextInput

Lets people enter a single line of text or a number, with the label, help text and error message tied to the field.

28 October 2026

Added

Field colours change in 110 ms on focus and error with motion.field; the error message fades in and drops 4 px with motion.fieldMessage, without a shake.
invalid: marks the field invalid without a message.
required and necessityIndicator: * with a hidden “required” on required fields, or “(optional)” on optional ones; the text comes from the library’s string catalogue in the Provider language.
startContent and endContent: content inside the field box before and after the input.
data-readonly for readOnly, data-required for required; data-component="text-input" on the root and data-part on the parts.
Public Field and its parts (Field.Root, Field.Label, Field.Control, Field.Description, Field.Error) for custom controls.

Changed

The aria-describedby order is fixed: description first, then error.
description now takes React content as well as text.
Border, fill and focus ring are drawn on a box that wraps the input and its start and end content.
New sm size (32 px); md is 36 px (40 px on a touch screen) and lg 40 px. Corner radius is 10 px.
The box gets a hairline shadow; the focus outline is drawn 2 px outside the box; an invalid box gets a 2 px danger halo.
On a coarse pointer (touch), md is 44 px tall and lg 48 px; it stays aligned with Button.

Added

First release: label, help text and error text; two sizes (md, lg); disabled state.
Built on Base UI Field and Input; label, help and error text are linked to the input automatically.
Colours, sizes and the focus ring come from tokens; light and dark mode and brand changes need no extra setup.