• 
      

    Add a new text field component.

    Review Request #15212 — Created July 30, 2026 and updated

    Information

    Ink
    master

    Reviewers

    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 __icon and the native __input. The
    input is exposed as an inputEl member, with value, disabled,
    placeholder, and autofocus properties 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/:hover on 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 ariaLabel and
    ariaLabelledBy options. This matters most for icon-only search boxes,
    where placeholder text is not a reliable label. ariaLabelledBy takes
    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 pins font-weight and
    line-height, the same way Ink.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.
    Summary ID
    Add a new text field component.
    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 `__icon` and the native `__input`. The input is exposed as an `inputEl` member, with `value`, `disabled`, `placeholder`, and `autofocus` properties 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`/`:hover` on 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 `ariaLabel` and `ariaLabelledBy` options. This matters most for icon-only search boxes, where placeholder text is not a reliable label. `ariaLabelledBy` takes 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 pins `font-weight` and `line-height`, the same way `Ink.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. Testing Done: - 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.
    nwroupzsosltswklnklnpslzwtrtrwkx

    Checks run (2 succeeded)
    flake8 passed.
    JSHint passed.