Text field — Full Spec + Interaction Module
Baseline components.css §9 is unchanged. This page demonstrates
native/CSS interaction states for filled, outlined, textarea, slots,
static counter, static clear affordance, and native validation. No
lab-text-field.js is wired in v3.5.7.
§2. Filled variant matrix
Filled states: empty, populated, leading icon, static focused, manual error, native disabled, supporting text, and static counter.
Rest state: empty input, label centered.
Populated state: label floats without JavaScript.
Filled leading-icon specimen; icon-system is a conditional composition dependency.
Static catalog focus specimen — no script, visual focus state only.
Manual .is-error state for server-rendered/static examples.
Native disabled input blocks editing through platform behavior.
Static counter specimen — no live character count is wired here.
§3. Outlined variant matrix
Outlined states include the same native/CSS behavior plus leading, trailing, prefix, suffix, and native validation specimens.
Outlined rest state.
Populated outlined field with floated label.
Static catalog focus specimen — shows outline/label focus treatment.
Manual error with helper text.
Leading icon uses icon-system conditionally; field remains valid without it.
Prefix-only currency specimen; formatted input text is visible because the field is populated.
§4. Native / CSS states
Native browser validation drives :user-invalid after
interaction. Manual .is-error is still used for static
server-rendered examples.
Native validation specimen — no custom validation JS is wired.
Readonly is native HTML support; no distinct baseline visual state is claimed.
Required field with native validity surface.
§5. Slots and composed trailing icon-button
Text field owns placement. Icon system owns glyph rendering. Icon button owns interactive trailing action semantics and geometry.
Static clear specimen — the clear affordance is visual only; no click handler is wired in v3.5.7.
Error icon shares the trailing grid cell and hides the regular trailing action.
Suffix-only unit specimen; the entered value stays numeric and the unit is supplied by the field.
§6-§7. Counter, clear, and disabled split
Static counter specimen — no live character count is wired here.
Native disabled blocks field editing through platform behavior.
Plugin-managed specimen — aria-disabled communicates state only.
§8. Textarea variant
Textarea is a Text field variant, not a separate module or matrix row.
Static textarea counter; no auto-grow runtime is wired.
Native disabled textarea.
§9. Native input types
These are shell examples only. Search expansion, Date picker, and Time picker behavior belong to their own rows.
§10. Playwright QA targets
- Filled and outlined container height should render at 56px for single-line fields.
- Textarea should render at or above 96px min-height.
- Label should move and resize between rest, focus, and populated states.
- Clear button should remain a 40px composed Icon button in the trailing slot.
- Field host must not include
data-ax-ripple. - SC 2.5.8 / 2.5.5 apply to the composed clear icon-button, not the field host.
§11. Code snippets
<div class="text-field text-field--outlined">
<div class="text-field__container">
<input class="text-field__input" id="tf-email" type="email" placeholder=" " />
<label class="text-field__label" for="tf-email">Email</label>
</div>
</div>§12. Cross-references
Audit docs: SPEC, MEASUREMENT, WP-MAPPING. Baseline catalog: ../../style-guide.html#components-text-field.