Add a new text field component.
Review Request #15212 — Created July 30, 2026 and updated — Latest diff uploaded
This introduces
Ink.TextField, a styled text input component. It
supports text-like input types (text, search, email, tel, url,
password), placeholder text, form field names, arbitrary attributes, a
disabled state, and an optional leading icon (such as ink-i-search for
search boxes). The type is a TextFieldType union, so types that would
break the field chrome are caught at compile time.The component is structured as a wrapper element drawing the field
chrome, containing the optional__iconand the native__input. The
input is exposed as aninputElmember, withvalue,disabled,
placeholder, andautofocusproperties proxying to it, plus a
focus()method. Consumers can listen to standard DOM events (input,
change) on the input. Focus and hover styling use
:focus-within/:hoveron the wrapper.Because the wrapper draws the chrome, clicking the padding or the icon
focuses the input. This matches how a native field behaves.Fields can be given an accessible name through the
ariaLabeland
ariaLabelledByoptions. This matters most for icon-only search boxes,
where placeholder text is not a reliable label.ariaLabelledBytakes
precedence when both are set.An initial value is set as an attribute as well as a property, so it
becomes the field's default value. Resetting a containing form now
restores that value instead of blanking the field.Styling uses the existing input design tokens (
--ink-p-input-*,
--ink-g-border-input,--ink-u-border-radius-input) through a new
schema/component/theme triplet. The wrapper pinsfont-weightand
line-height, the same wayInk.Button does, so a host page cannot
distort the field's height. The input resets its appearance, so browsers
do not draw their own chrome for types such as search.This is the foundation for a new auto-complete/search component, which
builds on top of this field.
- Ran unit tests.
- Verified the appearance and default height in Firefox and Chrome,
including the search-icon configuration. Confirmed that a host page
setting line-height and font-weight leaves that height unchanged. - Verified that clicking the leading icon focuses the input, and that
the focus ring is drawn around the wrapper. - Added a new storybook entry and verified appearance in light and dark
modes.