@multiplatform.one/forms 6.0.4 → 6.3.0

package/src/fields/Geolocation/mapTypes.ts

@@ -0,0 +1,25 @@
+/**
+ * Shared contract for the platform-split Geolocation map surface
+ * (`GeolocationMap.tsx` web / `GeolocationMap.native.tsx`). Lives in its own
+ * file (Video `types.ts` pattern) so the twins cannot drift apart.
+ */
+export interface GeolocationMapSurfaceProps {
+  lat: number;
+  lng: number;
+  /**
+   * Half-size of the visible bbox in degrees. Web uses it for the OSM embed
+   * bbox; native derives an equivalent zoom level from it.
+   */
+  delta?: number;
+  /** Minimum pixel height of the map surface (expanded view). */
+  minHeight?: number;
+  /** Accessible title of the surface. */
+  title?: string;
+  /**
+   * Commits a picked coordinate (tap / long-press on native). The parent
+   * routes this through the field's canonical onChange path (LC-14).
+   */
+  onChange?: (lat: number, lng: number) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+}

package/src/fields/ImageField/ImageField.spec.tsx

@@ -1,4 +1,5 @@
-import { describe, expect, it } from "vitest";
+import { act, fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { ImageField } from "./index";
@@ -45,6 +46,32 @@ describe("ImageField", () => {
       const result = renderWithProviders(<ImageField label="Disabled" name="d" disabled />);
       expect(result.findTextElement("Disabled")).toBeDefined();
     });
+
+    it("fires canonical onChange and the deprecated onValueChange alias once when an image is chosen", async () => {
+      const onChange = vi.fn();
+      const onValueChange = vi.fn();
+      const result = renderWithProviders(
+        <ImageField
+          label="Avatar"
+          name="avatar"
+          onChange={onChange}
+          onValueChange={onValueChange}
+        />,
+      );
+
+      const input = result.container.querySelector("input[type='file']") as HTMLInputElement | null;
+      expect(input).toBeTruthy();
+      const file = new File(["fake-image"], "avatar.png", { type: "image/png" });
+      await act(async () => {
+        if (input) fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      // Exactly once each — guards against the standalone double-fire bug.
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(file);
+      expect(onValueChange).toHaveBeenCalledTimes(1);
+      expect(onValueChange).toHaveBeenCalledWith(file);
+    });
   });
 
   describe("with form context", () => {

package/src/fields/ImageField/ImageField.stories.tsx

@@ -212,3 +212,9 @@ export const NoRemoveButton: Story = {
   },
   render: (args) => <ImageField {...args} />,
 };
+
+/** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */
+export const SkeletonState: Story = {
+  args: { label: "Profile Photo", skeleton: true },
+  render: (args) => <ImageField {...args} />,
+};

package/src/fields/ImageField/index.tsx

@@ -7,11 +7,12 @@
 
 import { ImageIcon, XIcon } from "@phosphor-icons/react";
 import type { MouseEvent, ReactNode } from "react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Image, isWeb, Text, View, styled } from "tamagui";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
+import { t } from "../../shared/t";
 import { formCardColors, formCommonColors, formInputColors } from "../../shared/colorRamps";
 import {
   clampRadiusForControl,
@@ -38,7 +39,12 @@ export interface ImageFieldProps {
   /** Current value - can be a URL string or File object */
   value?: string | File | null;
   defaultValue?: string | File | null;
-  /** Callback when image changes */
+  /**
+   * Canonical change handler, consistent with the rest of the field family.
+   * Fires in both standalone and form mode. Prefer this over `onValueChange`.
+   */
+  onChange?: (value: string | File | null) => void;
+  /** @deprecated Use `onChange` instead. */
   onValueChange?: (value: string | File | null) => void;
   onBlur?: (...args: any[]) => void;
   /** Accepted image types (default: "image/*") */
@@ -105,7 +111,7 @@ const RemoveButton = styled(View, {
   name: "ImageFieldRemove",
   position: "absolute",
   top: -6,
-  right: -6,
+  insetInlineEnd: -6,
   width: 18,
   height: 18,
   borderRadius: 1000,
@@ -134,6 +140,7 @@ export function ImageField({
   id: idProp,
   value,
   defaultValue,
+  onChange: onChangeProp,
   onValueChange,
   onBlur,
   accept = "image/*",
@@ -154,22 +161,31 @@ export function ImageField({
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [validationError, setValidationError] = useState<string | undefined>();
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const resolvedValue = value !== undefined ? value : defaultValue;
 
-  // Get display URL from value
-  const getDisplayUrl = useCallback((val: string | File | null | undefined): string | null => {
-    if (!val) return null;
-    if (typeof val === "string") return val;
-    if (val instanceof File && isWeb) {
-      // Create object URL for File preview
-      const url = URL.createObjectURL(val);
-      setPreviewUrl((prev) => {
-        if (prev) URL.revokeObjectURL(prev);
-        return url;
-      });
-      return url;
+  // Object URLs must be created in an effect — calling setState inside render
+  // (previous getDisplayUrl) infinite-looped whenever value was a File
+  // (SB-T2-07: DataTableCell image upload crash).
+  useEffect(() => {
+    if (!(resolvedValue instanceof File) || !isWeb) {
+      setPreviewUrl(null);
+      return;
     }
-    return null;
-  }, []);
+    const url = URL.createObjectURL(resolvedValue);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [resolvedValue]);
+
+  // Pure — never mutates state. File values resolve via previewUrl from the effect.
+  const getDisplayUrl = useCallback(
+    (val: string | File | null | undefined): string | null => {
+      if (!val) return null;
+      if (typeof val === "string") return val;
+      if (val instanceof File) return previewUrl;
+      return null;
+    },
+    [previewUrl],
+  );
 
   const validateFile = useCallback(
     (file: File): string | null => {
@@ -203,10 +219,13 @@ export function ImageField({
 
       setValidationError(undefined);
       onChange?.(file);
+      // Canonical `onChange` and the alias `onValueChange` both fire once
+      // (same reconciliation as Switch).
+      onChangeProp?.(file);
       onValueChange?.(file);
       blurHandler?.();
     },
-    [validateFile, onValueChange],
+    [validateFile, onChangeProp, onValueChange],
   );
 
   const handleRemove = useCallback(
@@ -216,15 +235,13 @@ export function ImageField({
       blurHandler?: (...args: any[]) => void,
     ) => {
       e.stopPropagation();
-      if (previewUrl) {
-        URL.revokeObjectURL(previewUrl);
-        setPreviewUrl(null);
-      }
+      // Object-URL revoke happens in the preview effect cleanup when value clears.
       onChange?.(null);
+      onChangeProp?.(null);
       onValueChange?.(null);
       blurHandler?.();
     },
-    [previewUrl, onValueChange],
+    [onChangeProp, onValueChange],
   );
 
   const openFileDialog = useCallback(() => {
@@ -269,7 +286,10 @@ export function ImageField({
         {hasImage ? (
           <>
             <Image
-              source={{ uri: displayUrl }}
+              // src (string), not source: the RN source object leaks onto the
+              // DOM <img> as source="[object Object]" on web
+              src={displayUrl}
+              alt={typeof label === "string" && label ? label : t("Selected image")}
               width={imageWidth}
               height={imageHeight}
               objectFit="cover"
@@ -318,8 +338,13 @@ export function ImageField({
         required={required}
         size={size}
         knobProps={knobProps}
+        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+        // the sibling label/helper readable) — it needs the disabled state.
+        disabled={disabled}
       >
-        {renderImageField(value ?? defaultValue, standaloneError, onValueChange)}
+        {/* User callbacks fire once inside handleFileSelect/handleRemove —
+            passing onValueChange as the internal handler double-fired it. */}
+        {renderImageField(value ?? defaultValue, standaloneError, undefined)}
       </FieldLayout>
     );
   }
@@ -347,6 +372,8 @@ export function ImageField({
             required={required}
             size={size}
             knobProps={knobProps}
+            // LC-40: see standalone branch — FieldLayout carries dimWhole.
+            disabled={disabled}
           >
             {renderImageField(
               value !== undefined ? value : fieldValue,

package/src/fields/Input/Input.spec.tsx

@@ -1,7 +1,8 @@
-import { fireEvent, waitFor } from "@testing-library/react";
+import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
+import { TableCellContext } from "../../shared/tableCellContext";
 import { Input } from "./index";
 
 describe("Input", () => {
@@ -61,6 +62,47 @@ describe("Input", () => {
     });
   });
 
+  describe("purpose → keyboard/autofill (DG §32)", () => {
+    it("purpose=email sets autocomplete + inputmode on the DOM input", () => {
+      const result = renderWithProviders(<Input label="Email" name="email" purpose="email" />);
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("autocomplete")).toBe("email");
+      expect(input?.getAttribute("inputmode")).toBe("email");
+    });
+
+    it("purpose=phone sets tel autocomplete + tel inputmode", () => {
+      const result = renderWithProviders(<Input label="Phone" name="phone" purpose="phone" />);
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("autocomplete")).toBe("tel");
+      expect(input?.getAttribute("inputmode")).toBe("tel");
+    });
+
+    it("purpose=year uses numeric inputmode on a text input", () => {
+      const result = renderWithProviders(<Input label="Year" name="year" purpose="year" />);
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("inputmode")).toBe("numeric");
+      expect(input?.getAttribute("type")).not.toBe("number");
+    });
+
+    it("autoComplete token alone derives the keyboard (postal-code stays text)", () => {
+      const result = renderWithProviders(
+        <Input label="Postcode" name="postal" autoComplete="postal-code" />,
+      );
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("autocomplete")).toBe("postal-code");
+      expect(input?.getAttribute("inputmode")).toBeNull();
+    });
+
+    it("explicit autoComplete + keyboardType eject the purpose defaults", () => {
+      const result = renderWithProviders(
+        <Input label="Email" name="email" purpose="email" autoComplete="off" />,
+      );
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("autocomplete")).toBe("off");
+      expect(input?.getAttribute("inputmode")).toBe("email");
+    });
+  });
+
   describe("with form context", () => {
     it("renders and validates with tanstack form", async () => {
       const onSubmit = vi.fn();
@@ -72,4 +114,87 @@ describe("Input", () => {
       expect(result.findTextElement("Name")).toBeDefined();
     });
   });
+
+  /**
+   * Regression guard for the TableInput audit NEEDS-DECISION item "forms
+   * Input remounts on focus". Investigation (p-results/fix-input-focus-
+   * remount.md) showed programmatic focus drops were environmental (storybook
+   * HMR remounts), not a component defect — these tests pin the invariant so
+   * a real focus-triggered remount can never land silently: the DOM node
+   * identity must be stable across focus, typing, and re-renders, and
+   * programmatic focus must stick (the table cell editor contract).
+   */
+  describe("focus stability — no remount on focus", () => {
+    it("standalone: programmatic focus sticks and node identity is stable", async () => {
+      const result = renderWithProviders(<Input label="Name" name="name" defaultValue="hello" />);
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(input).toBeTruthy();
+      act(() => input.focus());
+      expect(document.activeElement).toBe(input);
+      // Same node still mounted and focused after effects flush.
+      await waitFor(() => expect(document.activeElement).toBe(input));
+      expect(result.container.querySelector("input")).toBe(input);
+      expect(input.isConnected).toBe(true);
+    });
+
+    it("standalone: typing immediately after programmatic focus lands in the same node", async () => {
+      const onChangeText = vi.fn();
+      const result = renderWithProviders(
+        <Input label="Item" name="item" defaultValue="" onChangeText={onChangeText} />,
+      );
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      act(() => input.focus());
+      fireEvent.change(input, { target: { value: "XYZ" } });
+      await waitFor(() => expect(onChangeText).toHaveBeenCalledWith("XYZ"));
+      expect(result.container.querySelector("input")).toBe(input);
+      expect(document.activeElement).toBe(input);
+    });
+
+    it("form branch: focus survives field-state re-renders while typing", async () => {
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { name: "" } }} submitText="Submit">
+          <Input name="name" label="Name" />
+        </Form>,
+      );
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      act(() => input.focus());
+      expect(document.activeElement).toBe(input);
+      // field.handleChange re-renders the Field subtree — must not remount.
+      fireEvent.change(input, { target: { value: "abc" } });
+      await waitFor(() => expect(result.container.querySelector("input")).toBe(input));
+      expect(document.activeElement).toBe(input);
+      expect(input.isConnected).toBe(true);
+    });
+
+    it("in table cell (chromeless): programmatic focus on editor open sticks and typing works", async () => {
+      const onChangeText = vi.fn();
+      const result = renderWithProviders(
+        <TableCellContext.Provider value={{ inTableCell: true, isHeader: false, editable: true }}>
+          <Input name="item" value="Steel bracket" onChangeText={onChangeText} />
+        </TableCellContext.Provider>,
+      );
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(input).toBeTruthy();
+      // The cell editor contract: focus is set programmatically on open and
+      // the user can type immediately.
+      act(() => input.focus());
+      expect(document.activeElement).toBe(input);
+      fireEvent.change(input, { target: { value: "Aluminum bracket" } });
+      await waitFor(() => expect(onChangeText).toHaveBeenCalledWith("Aluminum bracket"));
+      expect(result.container.querySelector("input")).toBe(input);
+      expect(document.activeElement).toBe(input);
+    });
+
+    it("re-render with unrelated prop changes keeps the focused node mounted", async () => {
+      const result = renderWithProviders(
+        <Input label="Name" name="name" helperText="before" defaultValue="x" />,
+      );
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      act(() => input.focus());
+      expect(document.activeElement).toBe(input);
+      result.rerender(<Input label="Name" name="name" helperText="after" defaultValue="x" />);
+      await waitFor(() => expect(result.container.querySelector("input")).toBe(input));
+      expect(document.activeElement).toBe(input);
+    });
+  });
 });

package/src/fields/Input/Input.stories.tsx

@@ -110,6 +110,11 @@ export const Sizes: Story = {
   ),
 };
 
+/** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */
+export const SkeletonState: Story = {
+  args: { label: "Full name", skeleton: true },
+};
+
 export const Comparison: StoryObj = {
   render: () => {
     const ComparisonExample = () => {

package/src/fields/Input/index.tsx

@@ -1,8 +1,10 @@
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { useRef } from "react";
+import { ensureFocusVisibleRing } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
 import { Text } from "tamagui";
 import { Skeleton } from "../../Skeleton";
+import { resolveFieldInputProps } from "../../fieldDefaults";
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
   getFieldError,
@@ -10,12 +12,21 @@ import {
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
-import { Input as InputParts, useForwardFocus } from "../../InputParts";
+import { FocusContext, Input as InputParts, useForwardFocus } from "../../InputParts";
 import type { AnyFormApi, LinkResolver } from "../../types";
 import { LinkCell } from "../../utils/LinkCell";
 
 type InputAreaProps = ComponentProps<typeof InputParts.Area>;
 
+/**
+ * The knob focus ring must be CSS-driven on the focused input itself
+ * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
+ * frame after focus, which synchronous a11y probes (interact sweep) never
+ * see. The Box ring is suppressed via this no-op FocusContext so the field
+ * shows exactly one ring — same pattern as OTPInput/Stepper.
+ */
+const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
+
 export interface InputProps {
   name?: string;
   form?: AnyFormApi;
@@ -42,8 +53,21 @@ export interface InputProps {
   keyboardType?: string;
   textContentType?: string;
   autoComplete?: string;
+  /**
+   * Semantic content purpose (DG-FORM-07 / DG §32). Drives the default
+   * width (via FieldLayout) plus autocomplete token, web `inputMode` and
+   * native `keyboardType` (email, phone/tel, postalCode, year). Explicit
+   * `autoComplete` / `keyboardType` / `inputProps` eject.
+   */
+  purpose?: string;
   leftIcon?: ReactElement;
   rightIcon?: ReactElement;
+  /**
+   * Mark the rightIcon as interactive (e.g. a clear button). Skips the
+   * focus-forwarding wrapper, which otherwise bounces focus back to the
+   * input and makes anything inside the icon unreachable by keyboard.
+   */
+  rightIconInteractive?: boolean;
   inputProps?: Omit<InputAreaProps, "value" | "id" | "onChange" | "onChangeText">;
   children?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the input */
@@ -78,22 +102,37 @@ export function Input({
   keyboardType,
   textContentType,
   autoComplete,
+  purpose,
   readOnly,
   linkResolver,
   leftIcon,
   rightIcon,
+  rightIconInteractive,
   inputProps,
   children,
   skeleton,
   compact,
   chromeless,
 }: InputProps) {
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, control, id } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact,
+  });
   const inputRef = useRef<TamaguiElement>(null);
   const focusTrigger = useForwardFocus(inputRef);
+  // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
+  const areaFocusRing = ensureFocusVisibleRing({
+    ...control.focusVisibleKnobProps,
+    outlineOffset: -2,
+  });
 
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
 
+  // Purpose → autocomplete token + keyboard hints (DG §32). Explicit
+  // autoComplete/keyboardType/inputProps below eject per key.
+  const purposeInputProps = resolveFieldInputProps(purpose, autoComplete);
+
   // Render skeleton placeholder
   if (skeleton) {
     return (
@@ -112,8 +151,17 @@ export function Input({
     );
   }
 
+  // Chromeless strips the border + fill so the frame sits flush in a toolbar
+  // band — but never the focus ring: Axiom 12 / DG-A11Y-01 make the ≥2px
+  // focus-visible affordance a floor no variant may remove.
   const chromelessProps = chromeless
-    ? { borderWidth: 0, backgroundColor: "transparent" as const }
+    ? {
+        borderWidth: 0,
+        backgroundColor: "transparent" as const,
+        hoverStyle: { borderColor: "transparent" as const },
+        focusStyle: { borderColor: "transparent" as const, ...ensureFocusVisibleRing() },
+        focusVisibleStyle: { borderColor: "transparent" as const, ...ensureFocusVisibleRing() },
+      }
     : undefined;
 
   const renderInputBox = (
@@ -122,7 +170,13 @@ export function Input({
     handleBlur?: (...args: any[]) => void,
     hasError?: boolean,
   ) => (
-    <InputParts.Box {...(handleBlur ? { onBlur: handleBlur } : undefined)} {...chromelessProps}>
+    <InputParts.Box
+      {...(handleBlur ? { onBlur: handleBlur } : undefined)}
+      // LC-40: the Box owns the disabled chrome treatment (read-only renders
+      // its own branch below and never dims).
+      disabled={disabled}
+      {...chromelessProps}
+    >
       {leftIcon && (
         <InputParts.Icon adornment="leading" {...focusTrigger}>
           {leftIcon}
@@ -142,42 +196,62 @@ export function Input({
             </Text>
           </LinkCell>
         ) : (
+          <FocusContext.Provider {...suppressBoxFocusRing}>
+            <InputParts.Area
+              ref={inputRef}
+              value={inputValue ?? ""}
+              readOnly
+              id={id}
+              focusStyle={areaFocusRing}
+              focusVisibleStyle={areaFocusRing}
+              aria-readonly="true"
+              aria-required={required || undefined}
+              aria-invalid={hasError || undefined}
+            />
+          </FocusContext.Provider>
+        )
+      ) : (
+        <FocusContext.Provider {...suppressBoxFocusRing}>
           <InputParts.Area
             ref={inputRef}
-            value={inputValue ?? ""}
-            readOnly
+            {...(purposeInputProps.inputMode !== undefined
+              ? { inputMode: purposeInputProps.inputMode }
+              : undefined)}
+            {...(purposeInputProps.keyboardType !== undefined
+              ? { keyboardType: purposeInputProps.keyboardType }
+              : undefined)}
+            {...(purposeInputProps.autoComplete !== undefined
+              ? { autoComplete: purposeInputProps.autoComplete }
+              : undefined)}
+            focusStyle={areaFocusRing}
+            focusVisibleStyle={areaFocusRing}
+            {...inputProps}
+            {...(multiline !== undefined ? { multiline } : undefined)}
+            {...(maxLength !== undefined ? { maxLength } : undefined)}
+            {...(keyboardType !== undefined ? { keyboardType } : undefined)}
+            {...(textContentType !== undefined ? { textContentType } : undefined)}
+            {...(autoComplete !== undefined ? { autoComplete } : undefined)}
+            {...(secureTextEntry !== undefined ? { secureTextEntry } : undefined)}
+            {...(placeholder !== undefined ? { placeholder } : undefined)}
+            disabled={disabled}
             id={id}
-            aria-readonly="true"
+            defaultValue={inputValue}
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
+            onChange={onChange}
+            onChangeText={(text) => {
+              if (disabled) return;
+              handleChange?.(text);
+              onChangeText?.(text);
+            }}
           />
-        )
-      ) : (
-        <InputParts.Area
-          ref={inputRef}
-          {...inputProps}
-          {...(multiline !== undefined ? { multiline } : undefined)}
-          {...(maxLength !== undefined ? { maxLength } : undefined)}
-          {...(keyboardType !== undefined ? { keyboardType } : undefined)}
-          {...(textContentType !== undefined ? { textContentType } : undefined)}
-          {...(autoComplete !== undefined ? { autoComplete } : undefined)}
-          {...(secureTextEntry !== undefined ? { secureTextEntry } : undefined)}
-          {...(placeholder !== undefined ? { placeholder } : undefined)}
-          disabled={disabled}
-          id={id}
-          defaultValue={inputValue}
-          aria-required={required || undefined}
-          aria-invalid={hasError || undefined}
-          onChange={onChange}
-          onChangeText={(text) => {
-            if (disabled) return;
-            handleChange?.(text);
-            onChangeText?.(text);
-          }}
-        />
+        </FocusContext.Provider>
       )}
       {rightIcon && (
-        <InputParts.Icon adornment="trailing" {...focusTrigger}>
+        <InputParts.Icon
+          adornment="trailing"
+          {...(rightIconInteractive ? undefined : focusTrigger)}
+        >
           {rightIcon}
         </InputParts.Icon>
       )}
@@ -193,9 +267,12 @@ export function Input({
         error={error}
         helperText={helperText}
         required={required}
+        disabled={disabled}
         size={size}
         knobProps={knobProps}
         onBlur={onBlur}
+        purpose={purpose}
+        autoComplete={autoComplete}
       >
         <InputParts size={size || knobProps.sizeToken}>
           {renderInputBox(value ?? defaultValue, undefined, undefined, !!error)}
@@ -221,9 +298,12 @@ export function Input({
             error={resolvedError}
             helperText={helperText}
             required={required}
+            disabled={disabled}
             size={size}
             knobProps={knobProps}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+            purpose={purpose}
+            autoComplete={autoComplete}
           >
             <InputParts size={size || knobProps.sizeToken}>
               {renderInputBox(