The bounded container that groups label, input, description, and error message into a single labelled field. Carries the focus ring around the input control and the invalid styling when the field is in an error state. Auto-layout vertical frame; label on top, input + decorations in the middle, supporting text below slot="root" root The visible text label naming the input. Always rendered; hide visually only via accessible-hidden styling (never `display: none`). The required-state indicator (asterisk or "(required)") attaches here, never to the placeholder. Text node above the input; required indicator as a separate text or boolean property slot="label" label The `<input>` control. Receives the user's text. Carries the form `name`, the current `value`, the `type` attribute (text / email / tel / url / password / number / search — with search routing to the SearchInput primitive), the validation attributes (`required`, `pattern`, `minlength`, `maxlength`), and the `autocomplete` token. Input field component instance; size and variant drive padding and border treatment slot="input" input Optional supporting text below the input — format hints ("MM/DD/YYYY"), allowed-character notes ("Letters and numbers only"), or rationale ("We use this to send order updates"). Persistent across all states; visible whether or not the field is in error. Text node below the input; visibility bound to "has description" property slot="description" description Optional validation message — appears when the field is invalid. Sits in the same vertical slot as the description; either replaces it or stacks above it (canon: stack, with error first; description as persistent format guidance). Tied to `aria-invalid` on the input; SR announces on focus. Text node below the input; visibility bound to invalid state; warm-accent foreground slot="error" error-message Optional icon at the inline-start of the input — typically decorative and indicating the input's domain (envelope for email, lock for password, currency glyph for amount). For interactive leading affordances (a clickable hint button) use trailing-icon and document the role explicitly. Icon … slot=… leadi… Optional icon at the inline-end of the input — may be decorative (status glyph), or interactive (password visibility toggle, clear button, unit selector). The decorative-vs-interactive distinction is variant-driven and must be encoded explicitly in the implementation. Icon … slot=… trail…
A bounded surface for free-text user entry that resolves to a single string value — the canonical primitive for forms. Composes a visible label, an `<input>` element, optional description and error message, and optional leading/trailing decorations. Distinct from SearchInput (which emits a query) and from Combobox (which commits from a constrained list) — TextInput accepts and exposes arbitrary user-typed strings.
