diff --git a/lib/build/emailpassword-shared7.js b/lib/build/emailpassword-shared7.js
index 6415dc169..fffbcdf39 100644
--- a/lib/build/emailpassword-shared7.js
+++ b/lib/build/emailpassword-shared7.js
@@ -336,10 +336,7 @@ var Input = function (_a) {
     }
     function handleChange(event) {
         if (onChange) {
-            onChange({
-                id: name,
-                value: event.target.value,
-            });
+            onChange(event.target.value);
         }
     }
     if (autoComplete === undefined) {
@@ -549,7 +546,18 @@ var FormBase = function (props) {
     var onFormSubmit = React.useCallback(
         function (e) {
             return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () {
-                var apiFields, fieldUpdates, result, generalError, e_1, _loop_1, _i, formFields_1, field, errorFields_1;
+                var apiFields,
+                    fieldsWithIncorrectValues,
+                    errorFields,
+                    fieldUpdates,
+                    result,
+                    generalError,
+                    e_1,
+                    _loop_1,
+                    _i,
+                    formFields_1,
+                    field,
+                    errorFields_1;
                 return genericComponentOverrideContext.__generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -574,6 +582,25 @@ var FormBase = function (props) {
                                     value: fieldState === undefined ? "" : fieldState.value,
                                 };
                             });
+                            // field.value must be a string
+                            try {
+                                fieldsWithIncorrectValues = apiFields.filter(function (field) {
+                                    return typeof field.value !== "string";
+                                });
+                                if (fieldsWithIncorrectValues.length > 0) {
+                                    errorFields = fieldsWithIncorrectValues
+                                        .map(function (_a) {
+                                            var id = _a.id;
+                                            return id;
+                                        })
+                                        .join(", ");
+                                    throw new Error("".concat(errorFields, " value must be a string"));
+                                }
+                            } catch (error) {
+                                console.error(error);
+                                setIsLoading(false);
+                                return [2 /*return*/, props.onError("SOMETHING_WENT_WRONG_ERROR")];
+                            }
                             fieldUpdates = [];
                             _a.label = 1;
                         case 1:
@@ -721,7 +748,9 @@ var FormBase = function (props) {
                                                       autofocus: field.autofocus,
                                                       onInputFocus: onInputFocus,
                                                       onInputBlur: onInputBlur,
-                                                      onChange: onInputChange,
+                                                      onChange: function (value) {
+                                                          return onInputChange({ id: field.id, value: value });
+                                                      },
                                                       hasError: fstate.error !== undefined,
                                                   })
                                                 : jsxRuntime.jsx(Input, {
@@ -733,7 +762,9 @@ var FormBase = function (props) {
                                                       autoComplete: field.autoComplete,
                                                       onInputFocus: onInputFocus,
                                                       onInputBlur: onInputBlur,
-                                                      onChange: onInputChange,
+                                                      onChange: function (value) {
+                                                          return onInputChange({ id: field.id, value: value });
+                                                      },
                                                       autofocus: field.autofocus,
                                                       hasError: fstate.error !== undefined,
                                                   }),
diff --git a/lib/build/recipe/emailpassword/components/library/input.d.ts b/lib/build/recipe/emailpassword/components/library/input.d.ts
index 44893e14a..a9d8890e2 100644
--- a/lib/build/recipe/emailpassword/components/library/input.d.ts
+++ b/lib/build/recipe/emailpassword/components/library/input.d.ts
@@ -11,7 +11,7 @@ export declare type InputProps = {
     value: string;
     onInputBlur?: (field: APIFormField) => void;
     onInputFocus?: (field: APIFormField) => void;
-    onChange?: (field: APIFormField) => void;
+    onChange?: (value: string) => void;
 };
 declare const Input: React.FC<InputProps>;
 export default Input;
diff --git a/lib/ts/recipe/emailpassword/components/library/formBase.tsx b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
index 1dabbd92a..d1368c435 100644
--- a/lib/ts/recipe/emailpassword/components/library/formBase.tsx
+++ b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
@@ -120,6 +120,19 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                 };
             });
 
+            // field.value must be a string
+            try {
+                const fieldsWithIncorrectValues = apiFields.filter((field) => typeof field.value !== "string");
+                if (fieldsWithIncorrectValues.length > 0) {
+                    const errorFields = fieldsWithIncorrectValues.map(({ id }) => id).join(", ");
+                    throw new Error(`${errorFields} value must be a string`);
+                }
+            } catch (error) {
+                console.error(error);
+                setIsLoading(false);
+                return props.onError("SOMETHING_WENT_WRONG_ERROR");
+            }
+
             const fieldUpdates: FieldState[] = [];
             // Call API.
             try {
@@ -219,7 +232,7 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                                     autofocus={field.autofocus}
                                     onInputFocus={onInputFocus}
                                     onInputBlur={onInputBlur}
-                                    onChange={onInputChange}
+                                    onChange={(value) => onInputChange({ id: field.id, value: value })}
                                     hasError={fstate.error !== undefined}
                                 />
                             ) : (
@@ -232,7 +245,7 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                                     autoComplete={field.autoComplete}
                                     onInputFocus={onInputFocus}
                                     onInputBlur={onInputBlur}
-                                    onChange={onInputChange}
+                                    onChange={(value) => onInputChange({ id: field.id, value: value })}
                                     autofocus={field.autofocus}
                                     hasError={fstate.error !== undefined}
                                 />
diff --git a/lib/ts/recipe/emailpassword/components/library/input.tsx b/lib/ts/recipe/emailpassword/components/library/input.tsx
index 70f34f331..a72cea67d 100644
--- a/lib/ts/recipe/emailpassword/components/library/input.tsx
+++ b/lib/ts/recipe/emailpassword/components/library/input.tsx
@@ -34,7 +34,7 @@ export type InputProps = {
     value: string;
     onInputBlur?: (field: APIFormField) => void;
     onInputFocus?: (field: APIFormField) => void;
-    onChange?: (field: APIFormField) => void;
+    onChange?: (value: string) => void;
 };
 
 const Input: React.FC<InputProps> = ({
@@ -77,10 +77,7 @@ const Input: React.FC<InputProps> = ({
 
     function handleChange(event: ChangeEvent<HTMLInputElement>) {
         if (onChange) {
-            onChange({
-                id: name,
-                value: event.target.value,
-            });
+            onChange(event.target.value);
         }
     }