@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -1,6 +1,8 @@
 import { fireEvent } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
 import { SearchInput } from "./index";
 
 describe("SearchInput", () => {
@@ -140,6 +142,12 @@ describe("SearchInput", () => {
     const clear = result.container.querySelector("[aria-label='Clear search']");
     if (!clear) throw new Error("clear button not rendered");
     expect(clear.getAttribute("tabindex")).toBe("0");
+    expect(clear.className).toMatch(/mp-chip-dismiss/);
+    expect(clear.className).not.toMatch(/mp-chip-dismiss-ring/);
+    const ring = clear.querySelector(".mp-chip-dismiss-ring");
+    expect(ring).not.toBeNull();
+    expect(clear.contains(ring)).toBe(true);
+    expect(result.container.querySelector(".mp-search-clear-ring")).toBeNull();
     const extraStops = [...result.container.querySelectorAll("[tabindex='0']")].filter(
       (el) => el !== input && el !== clear,
     );
@@ -185,4 +193,82 @@ describe("SearchInput", () => {
     const input = result.container.querySelector("input");
     expect(input?.getAttribute("aria-disabled")).toBe("true");
   });
+
+  it("does not fork a SearchInput-only clear ring stylesheet", () => {
+    renderWithProviders(<SearchInput defaultValue="abc" />);
+    const chrome = document.getElementById("mp-search-input-chrome")?.textContent ?? "";
+    expect(chrome).not.toMatch(/mp-search-clear/);
+    expect(chrome).toMatch(/mp-search-input/);
+  });
+
+  it("default painted box is 44 tall; end-cap is the size-recipe square", () => {
+    const result = renderWithProviders(<SearchInput defaultValue="abc" />);
+    const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    const clear = result.container.querySelector("[aria-label='Clear search']") as HTMLElement;
+    if (!box || !clear) throw new Error("box or clear not found");
+    expect(box.getAttribute("data-visual-height")).toBe("44");
+    expect(clear.getAttribute("data-end-cap")).toBe("44");
+    expect(box.getAttribute("data-press-floor")).toBe("box");
+  });
+
+  it("end-cap square is generated from the size recipe at every token", () => {
+    for (const token of SIZE_RECIPE_TOKENS) {
+      if (token === "$true") continue;
+      const height = sizeRecipeForToken(token).height;
+      const result = renderWithProviders(
+        <SearchInput defaultValue="abc" size={token} aria-label={`q-${token}`} />,
+      );
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const clear = result.container.querySelector("[aria-label='Clear search']") as HTMLElement;
+      if (!box || !clear) throw new Error(`anatomy missing at ${token}`);
+      expect(box.getAttribute("data-visual-height"), token).toBe(String(height));
+      expect(clear.getAttribute("data-end-cap"), token).toBe(String(height));
+    }
+  });
+
+  it("compact steps density and leaves size on the recipe; size ejects height", () => {
+    const compact = renderWithProviders(<SearchInput compact />);
+    const compactBox = compact.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(compactBox.getAttribute("data-density")).toBe("compact");
+    // LC-76: compact is density only — default size stays the medium recipe.
+    expect(compactBox.getAttribute("data-size")).toBe("$4");
+
+    const sized = renderWithProviders(<SearchInput size="$5" />);
+    const sizedBox = sized.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(sizedBox.getAttribute("data-density")).toBe("comfortable");
+    expect(sizedBox.getAttribute("data-size")).toBe("$5");
+
+    const both = renderWithProviders(<SearchInput compact size="$5" />);
+    const bothBox = both.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(bothBox.getAttribute("data-density")).toBe("compact");
+    expect(bothBox.getAttribute("data-size")).toBe("$5");
+  });
+
+  it("renders skeleton without a searchbox (LC-20)", () => {
+    const result = renderWithProviders(<SearchInput label="Find" skeleton />);
+    expect(result.container.querySelector("input")).toBeNull();
+    expect(result.findTextElement("Find")).toBeDefined();
+  });
+
+  it("error replaces helper in the field slot", () => {
+    const result = renderWithProviders(
+      <SearchInput label="Find" helperText="Type a name" error="Too short" />,
+    );
+    expect(result.findTextElement("Type a name")).toBeUndefined();
+    expect(result.findTextElement("Too short")).toBeDefined();
+  });
+
+  it("form-integrated name keeps onChange(value) (LC-14)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Form formOptions={{ defaultValues: { q: "" } }} onSubmit={() => {}} submitText="Go">
+        <SearchInput name="q" label="Find" onChange={onChange} debounceMs={0} />
+      </Form>,
+    );
+    expect(result.findTextElement("Find")).toBeDefined();
+    const input = result.container.querySelector("input");
+    if (!input) throw new Error("input not found");
+    fireEvent.change(input, { target: { value: "abc" } });
+    expect(onChange).toHaveBeenCalledWith("abc");
+  });
 });

package/src/fields/SearchInput/SearchInput.stories.tsx

@@ -134,3 +134,17 @@ export const Disabled: Story = {
     </YStack>
   ),
 };
+
+/** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20). */
+export const SkeletonState: Story = {
+  args: { label: "Find", skeleton: true },
+};
+
+export const WithError: Story = {
+  args: { label: "Find", error: "Too short", defaultValue: "ab" },
+  render: (args) => (
+    <YStack maxWidth={400}>
+      <SearchInput {...args} />
+    </YStack>
+  ),
+};

package/src/fields/SearchInput/index.tsx

@@ -4,28 +4,45 @@
  * Anatomy (Polaris / Primer / Linear / Spotlight, LC-71):
  * one painted box around muted magnifier + field + clear. The inner
  * native field never rings. Magnifier is not a tab stop. Clear ✕ is the
- * second focusable and rings its own glyph (Spotlight circle-x).
+ * second focusable and rings its own glyph (chip-dismiss, LC-16).
+ *
+ * Clear is a View sized from the size-recipe square (same geometry as
+ * Input.Button). Origin/main's TButton swallows className, so the
+ * chip-dismiss ring classes cannot ride Input.Button until glyphRing
+ * lands — do not rewrite Input/ from this lane.
  */
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import {
-  FOCUS_VISIBLE_RING,
+  MIN_PRESS_TARGET,
   ensureCompositeFocusRing,
+  isTouchSurface,
   pressTargetHitSlop,
   sizeRecipeForToken,
 } from "@multiplatform.one/theme";
 import type { ComponentProps, ReactNode, RefObject } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { SizeTokens, TamaguiElement } from "tamagui";
-import { View, getVariable, isWeb, styled, useTheme } from "tamagui";
-import { FieldLayout } from "../../fieldLayout";
+import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
+import { View, isWeb } from "tamagui";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { formControlColors } from "../../shared/colorRamps";
 import { bidiIsolate, t } from "../../shared/t";
-import { useFormField } from "../../shared/utils";
+import type { AnyFormApi } from "../../types";
+import {
+  getFieldError,
+  getFieldHeight,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
 
 type AreaProps = ComponentProps<typeof InputParts.Area>;
 
 export interface SearchInputProps {
+  name?: string;
+  form?: AnyFormApi;
+  validators?: Record<string, unknown>;
   /** Controlled value. Omit for uncontrolled use with defaultValue. */
   value?: string;
   defaultValue?: string;
@@ -35,31 +52,35 @@ export interface SearchInputProps {
   onSearch?: (text: string) => void;
   /** Fires when the clear affordance or Escape empties the box. */
   onClear?: () => void;
+  onBlur?: (...args: unknown[]) => void;
   /** Debounce for onSearch in ms. 0 fires synchronously. */
   debounceMs?: number;
   placeholder?: string;
   /** Show the clear (X) button when there is text. Escape always clears. */
   clearable?: boolean;
   disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  helperText?: string;
+  error?: string | boolean;
   size?: SizeTokens;
-  /** Compact sizing (toolbar embedding). */
+  /** Compact density (toolbar embedding). Orthogonal to `size`. */
   compact?: boolean;
   /** Borderless/background-less (flush toolbar bands). */
   chromeless?: boolean;
+  skeleton?: boolean;
   label?: ReactNode;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+  id?: string;
   "aria-label"?: string;
   /** Leading icon size in px. Defaults from the size token. */
   iconSize?: number;
   inputProps?: Omit<AreaProps, "value" | "id" | "onChange" | "onChangeText">;
 }
 
-// Leading glyph is a control-internal icon (LC-75/LC-79): it rides the
-// generated recipe's icon channel — no handwritten per-token px map.
-const iconSizeForToken = (token: string): number => sizeRecipeForToken(token).iconSize;
-
 const SEARCH_STYLE_ID = "mp-search-input-chrome";
 
-/** UA search chrome + LC-71: Box owns the field ring; ✕ rings its glyph. */
+/** UA search chrome only. Glyph ring is the shared chip-dismiss recipe. */
 const searchInputCss = `input.mp-search-input {
   -webkit-appearance: none;
   appearance: none;
@@ -76,14 +97,6 @@ input.mp-search-input:focus,
 input.mp-search-input:focus-visible {
   outline: none !important;
   box-shadow: none !important;
-}
-.mp-search-clear:focus,
-.mp-search-clear:focus-visible {
-  outline: none !important;
-}
-.mp-search-clear:focus-visible .mp-search-clear-ring {
-  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
-  outline-offset: -2px;
 }`;
 
 function ensureSearchInputChrome() {
@@ -96,38 +109,20 @@ function ensureSearchInputChrome() {
   document.head.appendChild(tag);
 }
 
-const ClearButton = styled(View, {
-  name: "SearchClear",
-  cursor: "pointer",
-  alignItems: "center",
-  justifyContent: "center",
-  opacity: 0.85,
-  outlineWidth: 0,
-  hoverStyle: { opacity: 1 },
-  pressStyle: { opacity: 0.9 },
-  focusStyle: { outlineWidth: 0 },
-  focusVisibleStyle: { opacity: 1, ...FOCUS_VISIBLE_RING },
-});
-
-const ClearWell = styled(View, {
-  name: "SearchClearWell",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: "$color8",
-  hoverStyle: { backgroundColor: "$color9" },
-  pressStyle: { backgroundColor: "$color10" },
-});
-
 function focusArea(ref: RefObject<TamaguiElement | null>) {
   (ref.current as { focus?: () => void } | null)?.focus?.();
 }
 
 export function SearchInput({
+  name,
+  form: formProp,
+  validators,
   value,
   defaultValue,
   onChange,
   onSearch,
   onClear,
+  onBlur,
   debounceMs = 300,
   // Bidi-isolated at the interpolation site (LC-58): under RTL the trailing
   // weak "..." otherwise reorders to the start ("…Search"). First-strong
@@ -136,25 +131,41 @@ export function SearchInput({
   placeholder = bidiIsolate(t("Search...")),
   clearable = true,
   disabled,
+  readOnly,
+  required,
+  helperText,
+  error,
   size,
   compact,
   chromeless,
+  skeleton,
   label,
+  labelProps,
+  id: idProp,
   "aria-label": ariaLabel,
   iconSize,
   inputProps,
 }: SearchInputProps) {
-  const { knobProps, id } = useFormField({ compact });
-  const theme = useTheme();
-  const clearInk = getVariable(theme.color1);
+  const { resolvedForm, knobProps, control, id } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact,
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const recipe = sizeRecipeForToken(String(resolvedSize), { touch: isTouchSurface() });
+  const visualHeight = getFieldHeight(resolvedSize);
+  const belowFloor = visualHeight < MIN_PRESS_TARGET;
   const isControlled = value !== undefined;
   const [internalText, setInternalText] = useState(defaultValue ?? "");
-  const text = isControlled ? value : internalText;
+  const standaloneText = isControlled ? value : internalText;
   const inputRef = useRef<TamaguiElement>(null);
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const onSearchRef = useRef(onSearch);
   onSearchRef.current = onSearch;
+  const onClearRef = useRef(onClear);
+  onClearRef.current = onClear;
 
   if (isWeb) ensureSearchInputChrome();
 
@@ -183,50 +194,76 @@ export function SearchInput({
     [debounceMs, fireSearch],
   );
 
-  const handleChangeText = useCallback(
-    (next: string) => {
-      if (!isControlled) setInternalText(next);
+  const writeText = useCallback(
+    (next: string, fieldChange?: (text: string) => void) => {
+      if (!isControlled && !fieldChange) setInternalText(next);
+      fieldChange?.(next);
       onChange?.(next);
       scheduleSearch(next);
     },
     [isControlled, onChange, scheduleSearch],
   );
 
-  const onClearRef = useRef(onClear);
-  onClearRef.current = onClear;
-
-  const handleClear = useCallback(() => {
-    if (!isControlled) setInternalText("");
-    onChange?.("");
-    fireSearch("");
-    onClearRef.current?.();
-    // Polaris / Spotlight: emptying via ✕ keeps the caret in the field.
-    // Do this before the button unmounts so focus does not drop to body.
-    focusArea(inputRef);
-  }, [isControlled, onChange, fireSearch]);
+  const clearText = useCallback(
+    (fieldChange?: (text: string) => void) => {
+      if (!isControlled && !fieldChange) setInternalText("");
+      fieldChange?.("");
+      onChange?.("");
+      fireSearch("");
+      onClearRef.current?.();
+      // Polaris / Spotlight: emptying via ✕ keeps the caret in the field.
+      // Do this before the button unmounts so focus does not drop to body.
+      focusArea(inputRef);
+    },
+    [isControlled, onChange, fireSearch],
+  );
 
-  const resolvedIconSize = iconSize ?? iconSizeForToken(String(size ?? knobProps.sizeToken));
-  const clearWell = resolvedIconSize;
-  const clearGlyph = Math.max(8, resolvedIconSize - 6);
-  const wellRadius = knobProps.pointy ? 0 : 1000;
-  const showClear = Boolean(clearable && !disabled && text);
+  const resolvedIconSize = iconSize ?? recipe.iconSize;
+  const boxContract = {
+    size: resolvedSize,
+    "data-density": knobProps.density,
+    "data-size": String(resolvedSize),
+    "data-visual-height": String(visualHeight),
+    "data-press-floor": belowFloor ? "slop" : "box",
+    "data-ring-target": "box",
+    ...(belowFloor ? { hitSlop: pressTargetHitSlop(visualHeight) } : undefined),
+  } as const;
 
   const chromelessProps = chromeless
     ? {
         borderWidth: 0,
         backgroundColor: "transparent" as const,
-        hoverStyle: { borderColor: "transparent" as const },
-        focusStyle: { borderColor: "transparent" as const },
+        hoverStyle: {
+          borderColor: "transparent" as const,
+          ...control.hoverKnobProps,
+        },
+        focusStyle: {
+          borderColor: "transparent" as const,
+          ...control.focusKnobProps,
+        },
       }
     : undefined;
 
+  const layoutBind = {
+    id,
+    label,
+    labelProps,
+    helperText,
+    required,
+    disabled,
+    size: resolvedSize,
+    knobProps,
+    placeholder,
+    "aria-label": ariaLabel,
+  };
+
   const leadingWebProps = isWeb
     ? {
         tabIndex: -1 as const,
         "aria-hidden": true,
         onMouseDown: (e: { preventDefault?: () => void }) => {
           e.preventDefault?.();
-          if (!disabled) focusArea(inputRef);
+          if (!disabled && !readOnly) focusArea(inputRef);
         },
       }
     : {
@@ -234,102 +271,166 @@ export function SearchInput({
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants" as const,
         onPress: () => {
-          if (!disabled) focusArea(inputRef);
+          if (!disabled && !readOnly) focusArea(inputRef);
         },
       };
 
-  const areaProps = {
-    id,
-    role: "searchbox",
-    "aria-label": label ? undefined : (ariaLabel ?? t("Search")),
-    type: "search",
-    autoComplete: "off",
-    spellCheck: false,
-    inputMode: "search",
-    enterKeyHint: "search",
-    value: text,
-    disabled,
-    placeholder,
-    paddingInlineStart: 0,
-    paddingInlineEnd: showClear ? 0 : undefined,
-    className: isWeb ? "mp-input-area mp-search-input" : undefined,
-    outlineWidth: 0,
-    outlineStyle: "none" as const,
-    outlineColor: "transparent",
-    focusStyle: {
+  const renderBox = (current: string, fieldChange?: (text: string) => void, hasError?: boolean) => {
+    const showClear = Boolean(clearable && !disabled && !readOnly && current);
+    const areaProps = {
+      id,
+      role: "searchbox",
+      "aria-label": label ? undefined : (ariaLabel ?? t("Search")),
+      "aria-invalid": hasError || undefined,
+      "aria-required": required || undefined,
+      "aria-readonly": readOnly || undefined,
+      type: "search",
+      autoComplete: "off",
+      spellCheck: false,
+      inputMode: "search",
+      enterKeyHint: "search",
+      value: current,
+      disabled,
+      readOnly,
+      placeholder,
+      paddingInlineStart: 0,
+      paddingInlineEnd: showClear ? 0 : undefined,
+      className: isWeb ? "mp-input-area mp-search-input" : undefined,
       outlineWidth: 0,
       outlineStyle: "none" as const,
       outlineColor: "transparent",
-    },
-    focusVisibleStyle: {
-      outlineWidth: 0,
-      outlineStyle: "none" as const,
-      outlineColor: "transparent",
-    },
-    onKeyDown: (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        if (!text) return;
-        e.preventDefault();
-        handleClear();
-      } else if (e.key === "Enter") {
-        fireSearch(text);
-      }
-    },
-    onSubmitEditing: () => fireSearch(text),
-    ...inputProps,
-  } as unknown as AreaProps;
+      focusStyle: {
+        outlineWidth: 0,
+        outlineStyle: "none" as const,
+        outlineColor: "transparent",
+      },
+      focusVisibleStyle: {
+        outlineWidth: 0,
+        outlineStyle: "none" as const,
+        outlineColor: "transparent",
+      },
+      onKeyDown: (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          if (!current) return;
+          e.preventDefault();
+          clearText(fieldChange);
+        } else if (e.key === "Enter") {
+          fireSearch(current);
+        }
+      },
+      onSubmitEditing: () => fireSearch(current),
+      ...inputProps,
+    } as unknown as AreaProps;
 
-  return (
-    <FieldLayout id={id} label={label} disabled={disabled} size={size} knobProps={knobProps}>
-      <InputParts size={size || knobProps.sizeToken}>
-        <InputParts.Box disabled={disabled} {...chromelessProps}>
-          <InputParts.Icon
-            adornment="leading"
-            color={formControlColors.boundary}
-            className={isWeb ? "mp-search-leading" : undefined}
-            {...leadingWebProps}
+    return (
+      <InputParts.Box
+        {...boxContract}
+        disabled={disabled}
+        {...chromelessProps}
+        {...(hasError ? { theme: "red" } : undefined)}
+      >
+        <InputParts.Icon
+          adornment="leading"
+          color={formControlColors.boundary}
+          className={isWeb ? "mp-search-leading" : undefined}
+          {...leadingWebProps}
+        >
+          <MagnifyingGlassIcon size={resolvedIconSize} />
+        </InputParts.Icon>
+        <InputParts.Area
+          ref={inputRef}
+          {...areaProps}
+          onChangeText={(next: string) => writeText(next, fieldChange)}
+        />
+        {showClear ? (
+          <View
+            role="button"
+            tabIndex={0}
+            aria-label={t("Clear search")}
+            className={isWeb ? "mp-chip-dismiss" : undefined}
+            data-end-cap={visualHeight}
+            width={visualHeight}
+            height={visualHeight}
+            alignItems="center"
+            justifyContent="center"
+            cursor="pointer"
+            outlineWidth={0}
+            hoverStyle={{ opacity: 1 }}
+            pressStyle={{ opacity: 0.9 }}
+            focusStyle={{ outlineWidth: 0 }}
+            focusVisibleStyle={{ outlineWidth: 0 }}
+            opacity={0.85}
+            flexShrink={0}
+            hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
+            onPress={() => clearText(fieldChange)}
+            onKeyDown={
+              ((e: KeyboardEvent) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  clearText(fieldChange);
+                }
+              }) as unknown as () => void
+            }
           >
-            <MagnifyingGlassIcon size={resolvedIconSize} />
-          </InputParts.Icon>
-          <InputParts.Area ref={inputRef} {...areaProps} onChangeText={handleChangeText} />
-          {showClear ? (
             <View
-              justifyContent="center"
+              className={isWeb ? "mp-chip-dismiss-ring" : undefined}
               alignItems="center"
-              paddingInlineEnd="$2.5"
-              paddingInlineStart={0}
-              flexShrink={0}
+              justifyContent="center"
             >
-              <ClearButton
-                role="button"
-                tabIndex={0}
-                aria-label={t("Clear search")}
-                className={isWeb ? "mp-search-clear" : undefined}
-                hitSlop={pressTargetHitSlop(clearWell)}
-                onPress={handleClear}
-                onKeyDown={
-                  ((e: KeyboardEvent) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleClear();
-                    }
-                  }) as unknown as () => void
-                }
-              >
-                <ClearWell
-                  className={isWeb ? "mp-search-clear-ring" : undefined}
-                  width={clearWell}
-                  height={clearWell}
-                  borderRadius={wellRadius}
-                >
-                  <XIcon size={clearGlyph} color={clearInk as string} />
-                </ClearWell>
-              </ClearButton>
+              <InputParts.Icon aria-hidden color={formControlColors.boundary}>
+                <XIcon size={resolvedIconSize} />
+              </InputParts.Icon>
             </View>
-          ) : null}
-        </InputParts.Box>
-      </InputParts>
-    </FieldLayout>
+          </View>
+        ) : null}
+      </InputParts.Box>
+    );
+  };
+
+  if (skeleton) {
+    return (
+      <FieldLayout {...layoutBind} error={error}>
+        <InputParts size={resolvedSize}>
+          <Skeleton variant="rounded" width="100%" height={visualHeight} />
+        </InputParts>
+      </FieldLayout>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
+        <InputParts size={resolvedSize}>{renderBox(standaloneText, undefined, !!error)}</InputParts>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, error);
+        return (
+          <FieldLayout
+            {...layoutBind}
+            error={resolvedError}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+          >
+            <InputParts size={resolvedSize} {...(resolvedError ? { theme: "red" } : undefined)}>
+              {renderBox(
+                String(field.state.value ?? ""),
+                (next) => field.handleChange(next as never),
+                !!resolvedError,
+              )}
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
   );
 }