diff --git a/.changeset/old-ghosts-yell.md b/.changeset/old-ghosts-yell.md
new file mode 100644
index 000000000..b2c4a0644
--- /dev/null
+++ b/.changeset/old-ghosts-yell.md
@@ -0,0 +1,9 @@
+---
+"@khanacademy/wonder-blocks-form": minor
+---
+
+- `TextField`
+  - Add `instantValidation` prop
+  - No longer calls `validate` prop if the field is disabled during initialization and on change
+- `TextArea`
+  - Validate the value during initialization if the field is not disabled
diff --git a/__docs__/wonder-blocks-form/form-utilities.ts b/__docs__/wonder-blocks-form/form-utilities.ts
new file mode 100644
index 000000000..d3c7a8709
--- /dev/null
+++ b/__docs__/wonder-blocks-form/form-utilities.ts
@@ -0,0 +1,23 @@
+/**
+ * Checks if a value is a valid email and returns an error message if it is invalid.
+ * @param value the email to validate
+ * @returns An error message if there is a validation error
+ */
+export const validateEmail = (value: string) => {
+    const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
+    if (!emailRegex.test(value)) {
+        return "Please enter a valid email";
+    }
+};
+
+/**
+ * Checks if a value is a valid phone number and returns an error message if it is invalid.
+ * @param value the phone number to validate
+ * @returns An error message if there is a validation error
+ */
+export const validatePhoneNumber = (value: string) => {
+    const telRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+    if (!telRegex.test(value)) {
+        return "Invalid US telephone number";
+    }
+};
diff --git a/__docs__/wonder-blocks-form/text-area.stories.tsx b/__docs__/wonder-blocks-form/text-area.stories.tsx
index 65e0e0e3b..1f8e2251c 100644
--- a/__docs__/wonder-blocks-form/text-area.stories.tsx
+++ b/__docs__/wonder-blocks-form/text-area.stories.tsx
@@ -13,6 +13,7 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 
 import TextAreaArgTypes from "./text-area.argtypes";
+import {validateEmail} from "./form-utilities";
 
 /**
  * A TextArea is an element used to accept text from the user.
@@ -200,12 +201,7 @@ export const Error: StoryComponentType = {
 export const ErrorFromValidation: StoryComponentType = {
     args: {
         value: "khan",
-        validate(value: string) {
-            const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-            if (!emailRegex.test(value)) {
-                return "Please enter a valid email";
-            }
-        },
+        validate: validateEmail,
     },
     render: ControlledTextArea,
     parameters: {
@@ -255,12 +251,7 @@ export const ErrorFromPropAndValidation = (args: PropsFor<typeof TextArea>) => {
                 {...args}
                 value={value}
                 onChange={handleChange}
-                validate={(value: string) => {
-                    const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-                    if (!emailRegex.test(value)) {
-                        return "Please enter a valid email";
-                    }
-                }}
+                validate={validateEmail}
                 onValidate={setValidationErrorMessage}
                 error={!!errorMessage}
             />
@@ -315,12 +306,7 @@ ErrorFromPropAndValidation.parameters = {
  */
 export const InstantValidation: StoryComponentType = {
     args: {
-        validate(value: string) {
-            const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-            if (!emailRegex.test(value)) {
-                return "Please enter a valid email";
-            }
-        },
+        validate: validateEmail,
     },
     render: (args) => {
         return (
diff --git a/__docs__/wonder-blocks-form/text-field.argtypes.ts b/__docs__/wonder-blocks-form/text-field.argtypes.ts
index 2e675c019..d9bf9fa76 100644
--- a/__docs__/wonder-blocks-form/text-field.argtypes.ts
+++ b/__docs__/wonder-blocks-form/text-field.argtypes.ts
@@ -187,6 +187,19 @@ export default {
         },
     },
 
+    instantValidation: {
+        description:
+            "If true, TextField is validated as the user types (onChange). If false, it is validated when the user's focus moves out of the field (onBlur). It is preferred that instantValidation is set to `false`, however, it defaults to `true` for backwards compatibility with existing implementations.",
+        table: {
+            type: {
+                summary: "boolean",
+            },
+        },
+        control: {
+            type: "boolean",
+        },
+    },
+
     /**
      * Number-specific props
      */
diff --git a/__docs__/wonder-blocks-form/text-field.stories.tsx b/__docs__/wonder-blocks-form/text-field.stories.tsx
index b78d562b0..89ca9e2e6 100644
--- a/__docs__/wonder-blocks-form/text-field.stories.tsx
+++ b/__docs__/wonder-blocks-form/text-field.stories.tsx
@@ -18,6 +18,7 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import TextFieldArgTypes from "./text-field.argtypes";
+import {validateEmail, validatePhoneNumber} from "./form-utilities";
 
 /**
  * A TextField is an element used to accept a single line of text from the user.
@@ -269,13 +270,6 @@ export const Email: StoryComponentType = () => {
         setValue(newValue);
     };
 
-    const validate = (value: string) => {
-        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-        if (!emailRegex.test(value)) {
-            return "Please enter a valid email";
-        }
-    };
-
     const handleValidate = (errorMessage?: string | null) => {
         setErrorMessage(errorMessage);
     };
@@ -301,7 +295,7 @@ export const Email: StoryComponentType = () => {
                 type="email"
                 value={value}
                 placeholder="Email"
-                validate={validate}
+                validate={validateEmail}
                 onValidate={handleValidate}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
@@ -338,13 +332,6 @@ export const Telephone: StoryComponentType = () => {
         setValue(newValue);
     };
 
-    const validate = (value: string) => {
-        const telRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
-        if (!telRegex.test(value)) {
-            return "Invalid US telephone number";
-        }
-    };
-
     const handleValidate = (errorMessage?: string | null) => {
         setErrorMessage(errorMessage);
     };
@@ -370,7 +357,7 @@ export const Telephone: StoryComponentType = () => {
                 type="tel"
                 value={value}
                 placeholder="Telephone"
-                validate={validate}
+                validate={validatePhoneNumber}
                 onValidate={handleValidate}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
@@ -398,6 +385,32 @@ Telephone.parameters = {
     },
 };
 
+const ControlledTextField = (args: PropsFor<typeof TextField>) => {
+    const [value, setValue] = React.useState(args.value || "");
+    const [error, setError] = React.useState<string | null | undefined>(null);
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    return (
+        <View>
+            <TextField
+                {...args}
+                value={value}
+                onChange={handleChange}
+                onValidate={setError}
+            />
+            <Strut size={spacing.xxSmall_6} />
+            {(error || args.error) && (
+                <LabelSmall style={styles.errorMessage}>
+                    {error || "Error from error prop"}
+                </LabelSmall>
+            )}
+        </View>
+    );
+};
+
 function ErrorRender(args: PropsFor<typeof TextField>) {
     const [value, setValue] = React.useState("khan");
     const [errorMessage, setErrorMessage] = React.useState<any>();
@@ -406,13 +419,6 @@ function ErrorRender(args: PropsFor<typeof TextField>) {
         setValue(newValue);
     };
 
-    const validate = (value: string) => {
-        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-        if (!emailRegex.test(value)) {
-            return "Please enter a valid email";
-        }
-    };
-
     const handleValidate = (errorMessage?: string | null) => {
         setErrorMessage(errorMessage);
     };
@@ -429,7 +435,7 @@ function ErrorRender(args: PropsFor<typeof TextField>) {
                 id="tf-7"
                 type="email"
                 placeholder="Email"
-                validate={validate}
+                validate={validateEmail}
                 onValidate={handleValidate}
                 onKeyDown={handleKeyDown}
                 {...args}
@@ -534,12 +540,7 @@ export const ErrorFromPropAndValidation = (
                 {...args}
                 value={value}
                 onChange={handleChange}
-                validate={(value: string) => {
-                    const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-                    if (!emailRegex.test(value)) {
-                        return "Please enter a valid email";
-                    }
-                }}
+                validate={validateEmail}
                 onValidate={setValidationErrorMessage}
                 error={!!errorMessage}
             />
@@ -574,6 +575,94 @@ ErrorFromPropAndValidation.parameters = {
     },
 };
 
+/**
+ * The `instantValidation` prop controls when validation is triggered. Validation
+ * is triggered if the `validate` or `required` props are set.
+ *
+ * It is preferred to set `instantValidation` to `false` so that the user isn't
+ * shown an error until they are done with a field. Note: if `instantValidation`
+ * is not explicitly set, it defaults to `true` since this is the current
+ * behaviour of existing usage. Validation on blur needs to be opted in.
+ *
+ * Validation is triggered:
+ * - On mount if the `value` prop is not empty
+ * - If `instantValidation` is `true`, validation occurs `onChange` (default)
+ * - If `instantValidation` is `false`, validation occurs `onBlur`
+ *
+ * When `required` is set to `true`:
+ * - If `instantValidation` is `true`, the required error message is shown after
+ * a value is cleared
+ * - If `instantValidation` is `false`, the required error message is shown
+ * whenever the user tabs away from the required field
+ */
+export const InstantValidation: StoryComponentType = {
+    args: {
+        validate: validateEmail,
+    },
+    render: (args) => {
+        return (
+            <View style={{gap: spacing.small_12}}>
+                <LabelSmall htmlFor="instant-validation-true-not-required">
+                    Validation on mount if there is a value
+                </LabelSmall>
+                <ControlledTextField
+                    {...args}
+                    id="instant-validation-true-not-required"
+                    value="invalid"
+                />
+                <LabelSmall htmlFor="instant-validation-true-not-required">
+                    Error shown immediately (instantValidation: true, required:
+                    false)
+                </LabelSmall>
+                <ControlledTextField
+                    {...args}
+                    id="instant-validation-true-not-required"
+                    instantValidation={true}
+                />
+                <LabelSmall htmlFor="instant-validation-false-not-required">
+                    Error shown onBlur (instantValidation: false, required:
+                    false)
+                </LabelSmall>
+                <ControlledTextField
+                    {...args}
+                    id="instant-validation-false-not-required"
+                    instantValidation={false}
+                />
+
+                <LabelSmall htmlFor="instant-validation-true-required">
+                    Error shown immediately after clearing the value
+                    (instantValidation: true, required: true)
+                </LabelSmall>
+                <ControlledTextField
+                    {...args}
+                    validate={undefined}
+                    value="T"
+                    id="instant-validation-true-required"
+                    instantValidation={true}
+                    required="Required"
+                />
+                <LabelSmall htmlFor="instant-validation-false-required">
+                    Error shown on blur if it is empty (instantValidation:
+                    false, required: true)
+                </LabelSmall>
+                <ControlledTextField
+                    {...args}
+                    validate={undefined}
+                    id="instant-validation-false-required"
+                    instantValidation={false}
+                    required="Required"
+                />
+            </View>
+        );
+    },
+    parameters: {
+        chromatic: {
+            // Disabling because this doesn't test anything visual.
+            disableSnapshot: true,
+        },
+    },
+};
+
 export const Light: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan@khanacademy.org");
     const [errorMessage, setErrorMessage] = React.useState<any>();
@@ -583,13 +672,6 @@ export const Light: StoryComponentType = () => {
         setValue(newValue);
     };
 
-    const validate = (value: string) => {
-        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-        if (!emailRegex.test(value)) {
-            return "Please enter a valid email";
-        }
-    };
-
     const handleValidate = (errorMessage?: string | null) => {
         setErrorMessage(errorMessage);
     };
@@ -616,7 +698,7 @@ export const Light: StoryComponentType = () => {
                 value={value}
                 placeholder="Email"
                 light={true}
-                validate={validate}
+                validate={validateEmail}
                 onValidate={handleValidate}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
@@ -655,13 +737,6 @@ export const ErrorLight: StoryComponentType = () => {
         setValue(newValue);
     };
 
-    const validate = (value: string) => {
-        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-        if (!emailRegex.test(value)) {
-            return "Please enter a valid email";
-        }
-    };
-
     const handleValidate = (errorMessage?: string | null) => {
         setErrorMessage(errorMessage);
     };
@@ -688,7 +763,7 @@ export const ErrorLight: StoryComponentType = () => {
                 value={value}
                 placeholder="Email"
                 light={true}
-                validate={validate}
+                validate={validateEmail}
                 onValidate={handleValidate}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
diff --git a/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
index 880643224..cfb7c6e94 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
@@ -751,6 +751,8 @@ describe("TextArea", () => {
             it("should set the aria-details attribute when provided", async () => {
                 // Arrange
                 const ariaDetails = "details-id";
+
+                // Act
                 render(
                     <TextArea
                         value="Text"
@@ -759,7 +761,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 const textArea = await screen.findByRole("textbox");
@@ -827,13 +828,12 @@ describe("TextArea", () => {
 
             it("should set aria-invalid to false if the error prop is false", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea value="text" onChange={() => {}} error={false} />,
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
@@ -841,13 +841,12 @@ describe("TextArea", () => {
 
             it("should set aria-invalid to false if the error prop is not provided", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea value="text" onChange={() => {}} />,
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
@@ -859,6 +858,7 @@ describe("TextArea", () => {
         describe("validate prop", () => {
             it("should be in an error state if the initial value is not empty and not valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value="tooShort"
@@ -871,7 +871,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 const textArea = await screen.findByRole("textbox");
@@ -880,6 +879,7 @@ describe("TextArea", () => {
 
             it("should not be in an error state if the initial value is empty and not valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value=""
@@ -892,7 +892,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 const textArea = await screen.findByRole("textbox");
@@ -901,6 +900,7 @@ describe("TextArea", () => {
 
             it("should not be in an error state if the initial value is valid", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value="LongerThan10"
@@ -913,7 +913,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 const textArea = await screen.findByRole("textbox");
@@ -977,9 +976,11 @@ describe("TextArea", () => {
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
             });
 
-            it("should call the validate function when it is first rendered", async () => {
+            it("should call the validate function twice when it is first rendered (once on initialization, once after mount)", async () => {
                 // Arrange
                 const validate = jest.fn();
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -988,15 +989,57 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
+
+                // Assert
+                expect(validate.mock.calls).toStrictEqual([["text"], ["text"]]);
+            });
+
+            it("should call the onValidate function only once when it is first rendered (once after mount)", async () => {
+                // Arrange
+                const onValidate = jest.fn();
+                const errorMessage = "Error message";
+
                 // Act
+                render(
+                    <TextArea
+                        value="text"
+                        onChange={() => {}}
+                        validate={() => errorMessage}
+                        onValidate={onValidate}
+                    />,
+                    defaultOptions,
+                );
 
                 // Assert
-                expect(validate).toHaveBeenCalledExactlyOnceWith("text");
+                expect(onValidate).toHaveBeenCalledExactlyOnceWith(
+                    errorMessage,
+                );
+            });
+
+            it("should not call the validate function when it is first rendered if it is disabled and value is not empty", async () => {
+                // Arrange
+                const validate = jest.fn();
+
+                // Act
+                render(
+                    <TextArea
+                        value="text"
+                        disabled={true}
+                        onChange={() => {}}
+                        validate={validate}
+                    />,
+                    defaultOptions,
+                );
+
+                // Assert
+                expect(validate).not.toHaveBeenCalled();
             });
 
             it("should not call the validate function when it is first rendered if the value is empty", async () => {
                 // Arrange
                 const validate = jest.fn();
+
+                // Act
                 render(
                     <TextArea
                         value=""
@@ -1005,7 +1048,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 expect(validate).not.toHaveBeenCalled();
@@ -1069,6 +1111,8 @@ describe("TextArea", () => {
                 // Arrange
                 const handleValidate = jest.fn();
                 const errorMsg = "error message";
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -1078,7 +1122,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
@@ -1089,6 +1132,8 @@ describe("TextArea", () => {
             it("should call the onValidate prop with null if the validate prop returns null", () => {
                 // Arrange
                 const handleValidate = jest.fn();
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -1098,7 +1143,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
@@ -1107,6 +1151,8 @@ describe("TextArea", () => {
             it("should call the onValidate prop with null if the validate prop is a void function", () => {
                 // Arrange
                 const handleValidate = jest.fn();
+
+                // Act
                 render(
                     <TextArea
                         value="text"
@@ -1116,7 +1162,6 @@ describe("TextArea", () => {
                     />,
                     defaultOptions,
                 );
-                // Act
 
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
@@ -1126,6 +1171,7 @@ describe("TextArea", () => {
         describe("required prop", () => {
             it("should initially render with no error if it is required and the value is empty", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value=""
@@ -1135,8 +1181,6 @@ describe("TextArea", () => {
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
@@ -1144,6 +1188,7 @@ describe("TextArea", () => {
 
             it("should initially render with no error if it is required and the value is not empty", async () => {
                 // Arrange
+                // Act
                 render(
                     <TextArea
                         value="Text"
@@ -1153,8 +1198,6 @@ describe("TextArea", () => {
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
@@ -1205,6 +1248,7 @@ describe("TextArea", () => {
 
             it("should not call onValidate on first render if the value is empty and required prop is used", async () => {
                 // Arrange
+                // Act
                 const handleValidate = jest.fn();
                 render(
                     <TextArea
@@ -1216,14 +1260,13 @@ describe("TextArea", () => {
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 expect(handleValidate).not.toHaveBeenCalled();
             });
 
             it("should call onValidate with no error message on first render if the value is not empty and required prop is used", async () => {
                 // Arrange
+                // Act
                 const handleValidate = jest.fn();
                 render(
                     <TextArea
@@ -1235,8 +1278,6 @@ describe("TextArea", () => {
                     defaultOptions,
                 );
 
-                // Act
-
                 // Assert
                 expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
             });
diff --git a/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
index c9ab456b1..c99b36e32 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
@@ -1,12 +1,18 @@
+/* eslint-disable max-lines */
 import * as React from "react";
 import {fireEvent, render, screen} from "@testing-library/react";
 import {userEvent} from "@testing-library/user-event";
 
-import {View} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import Button from "@khanacademy/wonder-blocks-button";
 
 import TextField from "../text-field";
 
+const ControlledTextField = (props: Partial<PropsFor<typeof TextField>>) => {
+    const [value, setValue] = React.useState(props.value || "");
+    return <TextField {...props} value={value} onChange={setValue} />;
+};
+
 describe("TextField", () => {
     it("id prop is passed to input", async () => {
         // Arrange
@@ -740,4 +746,906 @@ describe("TextField", () => {
         const input = await screen.findByRole("textbox");
         expect(input).toHaveAttribute("aria-invalid", "false");
     });
+
+    describe("Validation", () => {
+        describe("validate prop", () => {
+            it("should be in an error state if the initial value is not empty and not valid", async () => {
+                // Arrange
+                // Act
+                render(
+                    <TextField
+                        value="tooShort"
+                        onChange={() => {}}
+                        validate={(value) => {
+                            if (value.length < 10) {
+                                return "Error: value should be >= 10";
+                            }
+                        }}
+                    />,
+                );
+
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "true");
+            });
+
+            it("should not be in an error state if the initial value is empty and not valid", async () => {
+                // Arrange
+                // Act
+                render(
+                    <TextField
+                        value=""
+                        onChange={() => {}}
+                        validate={(value) => {
+                            if (value.length < 10) {
+                                return "Error: value should be >= 10";
+                            }
+                        }}
+                    />,
+                );
+
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "false");
+            });
+
+            it("should not be in an error state if the initial value is valid", async () => {
+                // Arrange
+                // Act
+                render(
+                    <TextField
+                        value="LongerThan10"
+                        onChange={() => {}}
+                        validate={(value) => {
+                            if (value.length < 10) {
+                                return "Error: value should be >= 10";
+                            }
+                        }}
+                    />,
+                );
+
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "false");
+            });
+
+            it("should be able to change from a valid state to an error state", async () => {
+                // Arrange
+                const Controlled = () => {
+                    const [value, setValue] = React.useState("text");
+                    return (
+                        <TextField
+                            value={value}
+                            onChange={setValue}
+                            validate={(value) => {
+                                if (value.length > 4) {
+                                    return "Error";
+                                }
+                            }}
+                        />
+                    );
+                };
+                render(<Controlled />);
+
+                // Act
+                // Add a character to make it longer than the validation limit
+                await userEvent.type(await screen.findByRole("textbox"), "s");
+
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "true");
+            });
+
+            it("should be able to change from an error state to a valid state", async () => {
+                // Arrange
+                const Controlled = () => {
+                    const [value, setValue] = React.useState("texts");
+                    return (
+                        <TextField
+                            value={value}
+                            onChange={setValue}
+                            validate={(value) => {
+                                if (value.length > 4) {
+                                    return "Error";
+                                }
+                            }}
+                        />
+                    );
+                };
+                render(<Controlled />);
+
+                // Act
+                // Remove a character to make it within the validation limit
+                await userEvent.type(
+                    await screen.findByRole("textbox"),
+                    "{backspace}",
+                );
+
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "false");
+            });
+
+            it("should call the validate function twice when it is first rendered (once on initialization, once after mount)", async () => {
+                // Arrange
+                const validate = jest.fn();
+
+                // Act
+                render(
+                    <TextField
+                        value="text"
+                        onChange={() => {}}
+                        validate={validate}
+                    />,
+                );
+
+                // Assert
+                expect(validate.mock.calls).toStrictEqual([["text"], ["text"]]);
+            });
+
+            it("should call the onValidate function only once when it is first rendered (once after mount)", async () => {
+                // Arrange
+                const onValidate = jest.fn();
+                const errorMessage = "Error message";
+
+                // Act
+                render(
+                    <TextField
+                        value="text"
+                        onChange={() => {}}
+                        validate={() => errorMessage}
+                        onValidate={onValidate}
+                    />,
+                );
+
+                // Assert
+                expect(onValidate).toHaveBeenCalledExactlyOnceWith(
+                    errorMessage,
+                );
+            });
+
+            it("should not call the validate function when it is first rendered if it is disabled and value is not empty", async () => {
+                // Arrange
+                const validate = jest.fn();
+
+                // Act
+                render(
+                    <TextField
+                        value="text"
+                        disabled={true}
+                        onChange={() => {}}
+                        validate={validate}
+                    />,
+                );
+
+                // Assert
+                expect(validate).not.toHaveBeenCalled();
+            });
+
+            it("should not call the validate function when it is first rendered if the value is empty", async () => {
+                // Arrange
+                const validate = jest.fn();
+
+                // Act
+                render(
+                    <TextField
+                        value=""
+                        onChange={() => {}}
+                        validate={validate}
+                    />,
+                );
+
+                // Assert
+                expect(validate).not.toHaveBeenCalled();
+            });
+
+            it("should call the validate function when the value is updated", async () => {
+                // Arrange
+                const validate = jest.fn();
+                const Controlled = () => {
+                    const [value, setValue] = React.useState("text");
+                    return (
+                        <TextField
+                            value={value}
+                            onChange={setValue}
+                            validate={validate}
+                        />
+                    );
+                };
+                render(<Controlled />);
+                // Reset mock after initial render
+                validate.mockReset();
+
+                // Act
+                // Update value
+                await userEvent.type(await screen.findByRole("textbox"), "s");
+
+                // Assert
+                expect(validate).toHaveBeenCalledExactlyOnceWith("texts");
+            });
+
+            it("should call the validate function when the value is updated to an empty string", async () => {
+                // Arrange
+                const validate = jest.fn();
+                const Controlled = () => {
+                    const [value, setValue] = React.useState("t");
+                    return (
+                        <TextField
+                            value={value}
+                            onChange={setValue}
+                            validate={validate}
+                        />
+                    );
+                };
+                render(<Controlled />);
+                // Reset mock after initial render
+                validate.mockReset();
+
+                // Act
+                // Erase value
+                await userEvent.type(
+                    await screen.findByRole("textbox"),
+                    "{backspace}",
+                );
+
+                // Assert
+                expect(validate).toHaveBeenCalledExactlyOnceWith("");
+            });
+        });
+        describe("onValidate prop", () => {
+            it("should call the onValidate prop with the error message when the input is validated", () => {
+                // Arrange
+                const handleValidate = jest.fn();
+                const errorMsg = "error message";
+
+                // Act
+                render(
+                    <TextField
+                        value="text"
+                        onChange={() => {}}
+                        validate={() => errorMsg}
+                        onValidate={handleValidate}
+                    />,
+                );
+
+                // Assert
+                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
+                    errorMsg,
+                );
+            });
+
+            it("should call the onValidate prop with null if the validate prop returns null", () => {
+                // Arrange
+                const handleValidate = jest.fn();
+
+                // Act
+                render(
+                    <TextField
+                        value="text"
+                        onChange={() => {}}
+                        validate={() => null}
+                        onValidate={handleValidate}
+                    />,
+                );
+
+                // Assert
+                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
+            });
+
+            it("should call the onValidate prop with null if the validate prop is a void function", () => {
+                // Arrange
+                const handleValidate = jest.fn();
+
+                // Act
+                render(
+                    <TextField
+                        value="text"
+                        onChange={() => {}}
+                        validate={() => {}}
+                        onValidate={handleValidate}
+                    />,
+                );
+
+                // Assert
+                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
+            });
+        });
+
+        describe("required prop", () => {
+            it("should initially render with no error if it is required and the value is empty", async () => {
+                // Arrange
+                // Act
+                render(
+                    <TextField
+                        value=""
+                        onChange={() => {}}
+                        required="Required"
+                    />,
+                );
+
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "false");
+            });
+
+            it("should initially render with no error if it is required and the value is not empty", async () => {
+                // Arrange
+                // Act
+                render(
+                    <TextField
+                        value="Text"
+                        onChange={() => {}}
+                        required="Required"
+                    />,
+                );
+
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "false");
+            });
+
+            it("should not be in an error state if it is required, the field is empty, and a user tabs through the field", async () => {
+                // Arrange
+                render(
+                    <TextField
+                        value=""
+                        onChange={() => {}}
+                        required="Required"
+                    />,
+                );
+
+                // Act
+                // Tab into field
+                await userEvent.tab();
+                // Tab out of field
+                await userEvent.tab();
+
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "false");
+            });
+
+            it("shound update with error if it is required and the value changes to an empty string", async () => {
+                // Arrange
+                render(
+                    <TextField
+                        value="T"
+                        onChange={() => {}}
+                        required="Required"
+                    />,
+                );
+
+                // Act
+                await userEvent.type(
+                    await screen.findByRole("textbox"),
+                    "{backspace}",
+                );
+                // Assert
+                const field = await screen.findByRole("textbox");
+                expect(field).toHaveAttribute("aria-invalid", "true");
+            });
+
+            it("should not call onValidate on first render if the value is empty and required prop is used", async () => {
+                // Arrange
+                const handleValidate = jest.fn();
+
+                // Act
+                render(
+                    <TextField
+                        value=""
+                        onChange={() => {}}
+                        required="Required"
+                        onValidate={handleValidate}
+                    />,
+                );
+
+                // Assert
+                expect(handleValidate).not.toHaveBeenCalled();
+            });
+
+            it("should call onValidate with no error message on first render if the value is not empty and required prop is used", async () => {
+                // Arrange
+                const handleValidate = jest.fn();
+
+                // Act
+                render(
+                    <TextField
+                        value="Text"
+                        onChange={() => {}}
+                        required="Required"
+                        onValidate={handleValidate}
+                    />,
+                );
+
+                // Assert
+                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(null);
+            });
+
+            it("should call onValidate when the value is cleared", async () => {
+                // Arrange
+                const handleValidate = jest.fn();
+                render(
+                    <TextField
+                        value="T"
+                        onChange={() => {}}
+                        required="Required"
+                        onValidate={handleValidate}
+                    />,
+                );
+                // Reset mock after initial render
+                handleValidate.mockReset();
+
+                // Act
+                await userEvent.type(
+                    await screen.findByRole("textbox"),
+                    "{backspace}",
+                );
+
+                // Assert
+                expect(handleValidate).toHaveBeenCalledOnce();
+            });
+
+            it("should call onValidate with the custom error message from the required prop when it is a string", async () => {
+                // Arrange
+                const requiredErrorMsg = "Custom required error message";
+                const handleValidate = jest.fn();
+                render(
+                    <TextField
+                        value="T"
+                        onChange={() => {}}
+                        required={requiredErrorMsg}
+                        onValidate={handleValidate}
+                    />,
+                );
+                // Reset mock after initial render
+                handleValidate.mockReset();
+
+                // Act
+                await userEvent.type(
+                    await screen.findByRole("textbox"),
+                    "{backspace}",
+                );
+
+                // Assert
+                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
+                    requiredErrorMsg,
+                );
+            });
+
+            it("should call onValidate with a default error message if required is not a string", async () => {
+                // Arrange
+                const handleValidate = jest.fn();
+                render(
+                    <TextField
+                        value="T"
+                        onChange={() => {}}
+                        required={true}
+                        onValidate={handleValidate}
+                    />,
+                );
+                // Reset mock after initial render
+                handleValidate.mockReset();
+
+                // Act
+                await userEvent.type(
+                    await screen.findByRole("textbox"),
+                    "{backspace}",
+                );
+
+                // Assert
+                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
+                    "This field is required.",
+                );
+            });
+
+            it("should prioritize validate prop over required prop if both are provided", async () => {
+                // Arrange
+                const handleValidate = jest.fn();
+                const requiredErrorMessage = "Error because it is required";
+                const validateErrorMessage = "Error because of validation";
+                render(
+                    <TextField
+                        value="T"
+                        onChange={() => {}}
+                        required={requiredErrorMessage}
+                        onValidate={handleValidate}
+                        validate={() => validateErrorMessage}
+                    />,
+                );
+                // Reset mock after initial render
+                handleValidate.mockReset();
+
+                // Act
+                await userEvent.type(
+                    await screen.findByRole("textbox"),
+                    "{backspace}",
+                );
+
+                // Assert
+                expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
+                    validateErrorMessage,
+                );
+            });
+        });
+
+        describe("instantValidation prop", () => {
+            it("should call validate each time the value changes if the instantValidation prop is not provided", async () => {
+                // Arrange
+                const validate = jest.fn();
+                render(<ControlledTextField validate={validate} />);
+
+                // Act
+                const field = screen.getByRole("textbox");
+                await userEvent.type(field, "test");
+                await userEvent.tab();
+
+                // Assert
+                expect(validate.mock.calls).toStrictEqual([
+                    ["t"],
+                    ["te"],
+                    ["tes"],
+                    ["test"],
+                ]);
+            });
+
+            describe("instantValidation=true", () => {
+                it("should call validate each time the value changes", async () => {
+                    // Arrange
+                    const validate = jest.fn();
+                    render(
+                        <ControlledTextField
+                            validate={validate}
+                            instantValidation={true}
+                        />,
+                    );
+
+                    // Act
+                    const field = screen.getByRole("textbox");
+                    await userEvent.type(field, "test");
+                    await userEvent.tab();
+
+                    // Assert
+                    expect(validate.mock.calls).toStrictEqual([
+                        ["t"],
+                        ["te"],
+                        ["tes"],
+                        ["test"],
+                    ]);
+                });
+
+                it("should call onValidate with the error message each time the value changes", async () => {
+                    // Arrange
+                    const onValidate = jest.fn();
+                    const errorMessage = "Error";
+                    render(
+                        <ControlledTextField
+                            validate={() => errorMessage}
+                            onValidate={onValidate}
+                            instantValidation={true}
+                        />,
+                    );
+
+                    // Act
+                    const field = screen.getByRole("textbox");
+                    await userEvent.type(field, "test");
+                    await userEvent.tab();
+
+                    // Assert
+                    expect(onValidate.mock.calls).toStrictEqual([
+                        [errorMessage],
+                        [errorMessage],
+                        [errorMessage],
+                        [errorMessage],
+                    ]);
+                });
+
+                it("should have the input in an error state after validation fails without waiting for the user to tab away", async () => {
+                    // Arrange
+                    render(
+                        <ControlledTextField
+                            instantValidation={true}
+                            validate={() => "Error message"}
+                        />,
+                    );
+                    // Act
+                    const field = screen.getByRole("textbox");
+                    await userEvent.type(field, "test");
+
+                    // Assert
+                    expect(field).toHaveAttribute("aria-invalid", "true");
+                });
+            });
+            describe("instantValidation=false", () => {
+                it("should call validate once the user leaves the field", async () => {
+                    // Arrange
+                    const validate = jest.fn();
+                    render(
+                        <ControlledTextField
+                            validate={validate}
+                            instantValidation={false}
+                        />,
+                    );
+
+                    // Act
+                    const field = screen.getByRole("textbox");
+                    await userEvent.type(field, "test");
+                    await userEvent.tab();
+
+                    // Assert
+                    expect(validate).toHaveBeenCalledExactlyOnceWith("test");
+                });
+
+                it("should call onValidate once the user leaves the field", async () => {
+                    // Arrange
+                    const handleValidate = jest.fn();
+                    const errorMsg = "error message";
+                    render(
+                        <ControlledTextField
+                            validate={() => errorMsg}
+                            onValidate={handleValidate}
+                            instantValidation={false}
+                        />,
+                    );
+
+                    // Act
+                    const field = screen.getByRole("textbox");
+                    await userEvent.type(field, "test");
+                    await userEvent.tab();
+
+                    // Assert
+                    expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
+                        errorMsg,
+                    );
+                });
+
+                it("should not have the input in an error state before the field is blurred", async () => {
+                    // Arrange
+                    render(
+                        <ControlledTextField
+                            instantValidation={false}
+                            validate={() => "Error message"}
+                        />,
+                    );
+                    // Act
+                    const field = screen.getByRole("textbox");
+                    await userEvent.type(field, "test");
+
+                    // Assert
+                    expect(field).toHaveAttribute("aria-invalid", "false");
+                });
+
+                it("should have the input in an error state after validation fails and the field is blurred", async () => {
+                    // Arrange
+                    render(
+                        <ControlledTextField
+                            instantValidation={false}
+                            validate={() => "Error message"}
+                        />,
+                    );
+                    // Act
+                    const field = screen.getByRole("textbox");
+                    await userEvent.type(field, "test");
+                    await userEvent.tab();
+
+                    // Assert
+                    expect(field).toHaveAttribute("aria-invalid", "true");
+                });
+
+                it("should not be in an error state after a user updates the value after there was an error", async () => {
+                    // Arrange
+                    render(
+                        <ControlledTextField
+                            validate={() => "Error message"}
+                            instantValidation={false}
+                        />,
+                    );
+                    // Act
+                    const field = await screen.findByRole("textbox");
+                    await userEvent.type(field, "t");
+                    // Trigger blur so error is shown
+                    await userEvent.tab();
+                    // Updating the value should clear the error
+                    await userEvent.type(field, "te");
+
+                    // Assert
+                    expect(field).toHaveAttribute("aria-invalid", "false");
+                });
+
+                it("should call onValidate with null when the user changes the value after there was an error", async () => {
+                    // Arrange
+                    const handleValidate = jest.fn();
+                    const errorMsg = "error message";
+                    render(
+                        <ControlledTextField
+                            validate={() => errorMsg}
+                            onValidate={handleValidate}
+                            instantValidation={false}
+                        />,
+                    );
+
+                    // Act
+                    const field = screen.getByRole("textbox");
+                    await userEvent.type(field, "test");
+                    // Blur will trigger error to be shown
+                    await userEvent.tab();
+                    // Updating the value should clear the error using the onValidate prop
+                    await userEvent.type(field, "tests");
+
+                    // Assert
+                    expect(handleValidate.mock.calls).toStrictEqual([
+                        [errorMsg],
+                        [null],
+                    ]);
+                });
+
+                it("should not call the validate prop on blur if it is disabled", async () => {
+                    // Arrange
+                    const validate = jest.fn();
+                    render(
+                        <ControlledTextField
+                            value="test"
+                            validate={validate}
+                            disabled={true}
+                            instantValidation={false}
+                        />,
+                    );
+                    // Act
+                    await userEvent.tab();
+                    await userEvent.tab();
+
+                    // Assert
+                    expect(validate).not.toHaveBeenCalled();
+                });
+
+                describe("required", () => {
+                    it("shound be in error state if it is required, the value changes to an empty string, and the user tabs away", async () => {
+                        // Arrange
+                        render(
+                            <ControlledTextField
+                                value="T"
+                                required="Required"
+                                instantValidation={false}
+                            />,
+                        );
+
+                        // Act
+                        const field = await screen.findByRole("textbox");
+                        await userEvent.type(field, "{backspace}");
+                        await userEvent.tab();
+
+                        // Assert
+                        expect(field).toHaveAttribute("aria-invalid", "true");
+                    });
+
+                    it("shound not be in error state if it is required, the value changes to an empty string, and the user has not tabbed away", async () => {
+                        // Arrange
+                        render(
+                            <ControlledTextField
+                                value="T"
+                                required="Required"
+                                instantValidation={false}
+                            />,
+                        );
+
+                        // Act
+                        const field = await screen.findByRole("textbox");
+                        await userEvent.type(field, "{backspace}");
+
+                        // Assert
+                        expect(field).toHaveAttribute("aria-invalid", "false");
+                    });
+
+                    it("shound call onValidate with the required message if it is required, the value changes to an empty string, and the user tabs away", async () => {
+                        // Arrange
+                        const onValidate = jest.fn();
+                        const requiredMessage = "Required";
+                        render(
+                            <ControlledTextField
+                                value="T"
+                                required={requiredMessage}
+                                instantValidation={false}
+                                onValidate={onValidate}
+                            />,
+                        );
+
+                        // Act
+                        const field = await screen.findByRole("textbox");
+                        await userEvent.type(field, "{backspace}");
+                        await userEvent.tab();
+
+                        // Assert
+                        expect(onValidate.mock.calls).toStrictEqual([
+                            [null],
+                            [requiredMessage],
+                        ]);
+                    });
+
+                    it("shound be in error state if it is required, the value is empty, and the user tabs away", async () => {
+                        // Arrange
+                        render(
+                            <ControlledTextField
+                                required="Required"
+                                instantValidation={false}
+                            />,
+                        );
+
+                        // Act
+                        // Tab into field
+                        await userEvent.tab();
+                        // Tab out of field
+                        await userEvent.tab();
+
+                        // Assert
+                        const field = await screen.findByRole("textbox");
+                        expect(field).toHaveAttribute("aria-invalid", "true");
+                    });
+
+                    it("shound call onValidate with the required message if it is required, the value is empty, and the user tabs away", async () => {
+                        // Arrange
+                        const onValidate = jest.fn();
+                        const requiredMessage = "Required";
+                        render(
+                            <ControlledTextField
+                                required={requiredMessage}
+                                onValidate={onValidate}
+                                instantValidation={false}
+                            />,
+                        );
+
+                        // Act
+                        // Tab into field
+                        await userEvent.tab();
+                        // Tab out of field
+                        await userEvent.tab();
+
+                        // Assert
+                        expect(onValidate).toHaveBeenCalledExactlyOnceWith(
+                            requiredMessage,
+                        );
+                    });
+
+                    it("should not be in error state if it is not required, the value is empty, and the user tabs away", async () => {
+                        // Arrange
+                        render(
+                            <ControlledTextField
+                                required={undefined}
+                                instantValidation={false}
+                            />,
+                        );
+
+                        // Act
+                        // Tab into field
+                        await userEvent.tab();
+                        // Tab out of field
+                        await userEvent.tab();
+
+                        // Assert
+                        const field = await screen.findByRole("textbox");
+                        expect(field).toHaveAttribute("aria-invalid", "false");
+                    });
+
+                    it("should not call onValidate if it is not required, the value is empty, and the user tabs away", async () => {
+                        // Arrange
+                        const onValidate = jest.fn();
+                        render(
+                            <ControlledTextField
+                                required={undefined}
+                                instantValidation={false}
+                                onValidate={onValidate}
+                            />,
+                        );
+
+                        // Act
+                        // Tab into field
+                        await userEvent.tab();
+                        // Tab out of field
+                        await userEvent.tab();
+
+                        // Assert
+                        expect(onValidate).not.toHaveBeenCalled();
+                    });
+                });
+            });
+        });
+    });
 });
diff --git a/packages/wonder-blocks-form/src/components/text-area.tsx b/packages/wonder-blocks-form/src/components/text-area.tsx
index fcab8d600..f5afffc1f 100644
--- a/packages/wonder-blocks-form/src/components/text-area.tsx
+++ b/packages/wonder-blocks-form/src/components/text-area.tsx
@@ -4,7 +4,6 @@ import {StyleSheet} from "aphrodite";
 import {
     AriaProps,
     StyleType,
-    useOnMountEffect,
     useUniqueIdWithMock,
     addStyle,
     View,
@@ -17,6 +16,7 @@ import {
     spacing,
 } from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
+import {useFieldValidation} from "../hooks/use-field-validation";
 
 type TextAreaProps = AriaProps & {
     /**
@@ -190,8 +190,6 @@ type TextAreaProps = AriaProps & {
     light?: boolean;
 };
 
-const defaultErrorMessage = "This field is required.";
-
 const StyledTextArea = addStyle("textarea");
 
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
@@ -234,9 +232,15 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             ...otherProps
         } = props;
 
-        const [errorMessage, setErrorMessage] = React.useState<string | null>(
-            null,
-        );
+        const {errorMessage, onBlurValidation, onChangeValidation} =
+            useFieldValidation({
+                value,
+                disabled,
+                validate,
+                onValidate,
+                required,
+                instantValidation,
+            });
 
         const hasError = error || !!errorMessage;
 
@@ -247,73 +251,18 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             event: React.ChangeEvent<HTMLTextAreaElement>,
         ) => {
             const newValue = event.target.value;
+            onChangeValidation(newValue);
             onChange(newValue);
-            if (instantValidation) {
-                handleValidation(newValue);
-            } else {
-                if (errorMessage) {
-                    // If instantValidation is false and there is an error
-                    // message, error needs to be cleared when the user updates
-                    // the value
-                    setErrorMessage(null);
-                    if (onValidate) {
-                        onValidate(null);
-                    }
-                }
-            }
         };
 
         const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {
-            // Only handle validation on blur if instantValidation is false
-            if (!instantValidation) {
-                // Handle validation on blur if:
-                // 1. There is a value in the field so a user tabbing through
-                // fields doesn't trigger the error state when the field is left
-                // empty. Or,
-                // 2. The field is required. Tabbing through an empty field that
-                // is required will trigger the error state
-                if (event.target.value || required) {
-                    handleValidation(event.target.value);
-                }
-            }
+            onBlurValidation(event.target.value);
 
             if (onBlur) {
                 onBlur(event);
             }
         };
 
-        const handleValidation = (newValue: string) => {
-            // Should not handle validation if it is disabled
-            if (disabled) {
-                return;
-            }
-            if (validate) {
-                const error = validate(newValue) || null;
-                setErrorMessage(error);
-                if (onValidate) {
-                    onValidate(error);
-                }
-            } else if (required) {
-                const requiredString =
-                    typeof required === "string"
-                        ? required
-                        : defaultErrorMessage;
-                const error = newValue ? null : requiredString;
-                setErrorMessage(error);
-                if (onValidate) {
-                    onValidate(error);
-                }
-            }
-        };
-
-        useOnMountEffect(() => {
-            // Only validate on mount if the value is not empty. This is so that fields
-            // don't render an error when they are initially empty
-            if (value !== "") {
-                handleValidation(value);
-            }
-        });
-
         const getStyles = (): StyleType => {
             // Base styles are the styles that apply regardless of light mode
             const baseStyles = [
diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx
index 22f2cd215..014ac2e69 100644
--- a/packages/wonder-blocks-form/src/components/text-field.tsx
+++ b/packages/wonder-blocks-form/src/components/text-field.tsx
@@ -1,16 +1,13 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {
-    IDProvider,
-    addStyle,
-    useOnMountEffect,
-} from "@khanacademy/wonder-blocks-core";
+import {IDProvider, addStyle} from "@khanacademy/wonder-blocks-core";
 import {border, color, mix, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
 import {OmitConstrained} from "../util/types";
+import {useFieldValidation} from "../hooks/use-field-validation";
 
 export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
 
@@ -18,8 +15,6 @@ type WithForwardRef = {
     forwardedRef: React.ForwardedRef<HTMLInputElement>;
 };
 
-const defaultErrorMessage = "This field is required.";
-
 const StyledInput = addStyle("input");
 
 type CommonProps = AriaProps & {
@@ -61,6 +56,13 @@ type CommonProps = AriaProps & {
      * Called right after the TextField input is validated.
      */
     onValidate?: (errorMessage?: string | null | undefined) => unknown;
+    /**
+     * If true, TextField is validated as the user types (onChange). If false,
+     * it is validated when the user's focus moves out of the field (onBlur).
+     * It is preferred that instantValidation is set to `false`, however, it
+     * defaults to `true` for backwards compatibility with existing implementations.
+     */
+    instantValidation?: boolean;
     /**
      * Called when the value has changed.
      */
@@ -185,6 +187,7 @@ const TextField = (props: PropsWithForwardRef) => {
         autoFocus,
         autoComplete,
         forwardedRef,
+        instantValidation = true,
         onKeyDown,
         onChange,
         onFocus,
@@ -192,40 +195,20 @@ const TextField = (props: PropsWithForwardRef) => {
         // Should only include Aria related props
         ...otherProps
     } = props;
-    // Ensures error is updated on unmounted server-side renders
-    const [errorMessage, setErrorMessage] = React.useState(
-        (props.validate && props.value !== "" && props.validate(props.value)) ||
-            null,
-    );
+    const {errorMessage, onBlurValidation, onChangeValidation} =
+        useFieldValidation({
+            value,
+            required,
+            disabled,
+            instantValidation,
+            validate,
+            onValidate,
+        });
     const hasError = error || !!errorMessage;
 
-    useOnMountEffect(() => {
-        if (props.value !== "") {
-            maybeValidate(props.value);
-        }
-    });
-
-    const maybeValidate = (newValue: string) => {
-        if (validate) {
-            const maybeError = validate(newValue) || null;
-            setErrorMessage(maybeError);
-            if (onValidate) {
-                onValidate(maybeError);
-            }
-        } else if (required) {
-            const requiredString =
-                typeof required === "string" ? required : defaultErrorMessage;
-            const maybeError = newValue ? null : requiredString;
-            setErrorMessage(maybeError);
-            if (onValidate) {
-                onValidate(maybeError);
-            }
-        }
-    };
-
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         const newValue = event.target.value;
-        maybeValidate(newValue);
+        onChangeValidation(newValue);
         onChange(newValue);
     };
 
@@ -236,6 +219,8 @@ const TextField = (props: PropsWithForwardRef) => {
     };
 
     const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+        onBlurValidation(event.target.value);
+
         if (onBlur) {
             onBlur(event);
         }
diff --git a/packages/wonder-blocks-form/src/hooks/__tests__/use-field-validation.test.ts b/packages/wonder-blocks-form/src/hooks/__tests__/use-field-validation.test.ts
new file mode 100644
index 000000000..a5c467e35
--- /dev/null
+++ b/packages/wonder-blocks-form/src/hooks/__tests__/use-field-validation.test.ts
@@ -0,0 +1,657 @@
+import {act, renderHook, RenderResult} from "@testing-library/react-hooks";
+import {useFieldValidation} from "../use-field-validation";
+
+type Result = RenderResult<{
+    errorMessage: string | null;
+    onBlurValidation: (newValue: string) => void;
+    onChangeValidation: (newValue: string) => void;
+}>;
+describe("useFieldValidation", () => {
+    const testErrorMessage = "Error message";
+
+    describe("Initialization", () => {
+        describe("errorMessage", () => {
+            it("should have a null errorMessage if value is empty", () => {
+                // Arrange
+                // Act
+                const {result} = renderHook(() =>
+                    useFieldValidation({
+                        value: "",
+                        validate: () => testErrorMessage,
+                    }),
+                );
+
+                // Assert
+                expect(result.current.errorMessage).toBe(null);
+            });
+
+            it("should have a null errorMessage if value is set and there is no validate prop", () => {
+                // Arrange
+                // Act
+                const {result} = renderHook(() =>
+                    useFieldValidation({
+                        value: "Test",
+                    }),
+                );
+
+                // Assert
+                expect(result.current.errorMessage).toBe(null);
+            });
+
+            it("should have a null errorMessage if it is disabled", () => {
+                // Arrange
+                // Act
+                const {result} = renderHook(() =>
+                    useFieldValidation({
+                        value: "Test",
+                        validate: () => testErrorMessage,
+                        disabled: true,
+                    }),
+                );
+
+                // Assert
+                expect(result.current.errorMessage).toBe(null);
+            });
+
+            it("should have the errorMessage from the validate prop if value is set", () => {
+                // Arrange
+                // Act
+                const {result} = renderHook(() =>
+                    useFieldValidation({
+                        value: "Test",
+                        validate: () => testErrorMessage,
+                    }),
+                );
+
+                // Assert
+                expect(result.current.errorMessage).toBe(testErrorMessage);
+            });
+        });
+
+        describe("validate prop", () => {
+            it("should call the validate prop twice initially (once on state initalization and once after mounting", () => {
+                // Arrange
+                const validate = jest.fn();
+                const value = "Test";
+
+                // Act
+                renderHook(() =>
+                    useFieldValidation({
+                        value,
+                        validate,
+                    }),
+                );
+
+                // Assert
+                expect(validate.mock.calls).toStrictEqual([[value], [value]]);
+            });
+
+            it("should not call the validate prop if value is empty", () => {
+                // Arrange
+                const validate = jest.fn();
+
+                // Act
+                renderHook(() =>
+                    useFieldValidation({
+                        value: "",
+                        validate,
+                    }),
+                );
+
+                // Assert
+                expect(validate).not.toHaveBeenCalled();
+            });
+
+            it("should not call the validate prop if it is disabled", () => {
+                // Arrange
+                const validate = jest.fn();
+
+                // Act
+                renderHook(() =>
+                    useFieldValidation({
+                        value: "Test",
+                        validate,
+                        disabled: true,
+                    }),
+                );
+
+                // Assert
+                expect(validate).not.toHaveBeenCalled();
+            });
+        });
+        describe("onValidate prop", () => {
+            it("should call the onValidate prop once initially (only after mount)", () => {
+                // Arrange
+                const onValidate = jest.fn();
+
+                // Act
+                renderHook(() =>
+                    useFieldValidation({
+                        value: "Test",
+                        validate: () => testErrorMessage,
+                        onValidate,
+                    }),
+                );
+
+                // Assert
+                expect(onValidate).toHaveBeenCalledExactlyOnceWith(
+                    testErrorMessage,
+                );
+            });
+
+            it("should not call the onValidate prop if value is empty", () => {
+                // Arrange
+                const onValidate = jest.fn();
+
+                // Act
+                renderHook(() =>
+                    useFieldValidation({
+                        value: "",
+                        validate: () => testErrorMessage,
+                        onValidate,
+                    }),
+                );
+
+                // Assert
+                expect(onValidate).not.toHaveBeenCalled();
+            });
+
+            it("should not call the validate prop if it is disabled", () => {
+                // Arrange
+                const onValidate = jest.fn();
+
+                // Act
+                renderHook(() =>
+                    useFieldValidation({
+                        value: "Test",
+                        validate: () => testErrorMessage,
+                        onValidate,
+                        disabled: true,
+                    }),
+                );
+
+                // Assert
+                expect(onValidate).not.toHaveBeenCalled();
+            });
+        });
+    });
+
+    describe("Validation Cases - Checks validation logic depending on the triggering action and instantValidation prop", () => {
+        describe.each([
+            [
+                "onChangeValidation",
+                true,
+                (result: Result, value: string) => {
+                    result.current.onChangeValidation(value);
+                },
+            ],
+            [
+                "onBlurValidation",
+                false,
+                (result: Result, value: string) => {
+                    result.current.onBlurValidation(value);
+                },
+            ],
+        ])(
+            "%s - instantValidation = %s",
+            (
+                _actionName: string,
+                instantValidation: boolean,
+                action: (result: Result, value: string) => void,
+            ) => {
+                describe("validate", () => {
+                    it("should call the validate prop", () => {
+                        // Arrange
+                        const validate = jest.fn();
+                        const newValue = "X";
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "",
+                                validate,
+                                instantValidation,
+                            }),
+                        );
+
+                        // Act
+                        act(() => {
+                            action(result, newValue);
+                        });
+
+                        // Assert
+                        expect(validate).toHaveBeenCalledWith(newValue);
+                    });
+
+                    it("should update the errorMessage", () => {
+                        // Arrange
+                        const newValue = "X";
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "",
+                                instantValidation,
+                                validate: () => testErrorMessage,
+                            }),
+                        );
+
+                        // Act
+                        act(() => {
+                            action(result, newValue);
+                        });
+
+                        // Assert
+                        expect(result.current.errorMessage).toBe(
+                            testErrorMessage,
+                        );
+                    });
+                    it("should call onValidate", () => {
+                        // Arrange
+                        const newValue = "X";
+                        const onValidate = jest.fn();
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "",
+                                instantValidation,
+                                validate: () => testErrorMessage,
+                                onValidate,
+                            }),
+                        );
+
+                        // Act
+                        act(() => {
+                            action(result, newValue);
+                        });
+
+                        // Assert
+                        expect(onValidate).toHaveBeenCalledWith(
+                            testErrorMessage,
+                        );
+                    });
+
+                    it("should call onValidate with null if there is no error", () => {
+                        // Arrange
+                        const newValue = "X";
+                        const onValidate = jest.fn();
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "",
+                                instantValidation,
+                                validate: () => {},
+                                onValidate,
+                            }),
+                        );
+
+                        // Act
+                        act(() => {
+                            action(result, newValue);
+                        });
+
+                        // Assert
+                        expect(onValidate).toHaveBeenCalledWith(null);
+                    });
+
+                    it("should not call the validate prop if it is disabled", () => {
+                        // Arrange
+                        const validate = jest.fn();
+                        const newValue = "X";
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "",
+                                validate,
+                                instantValidation,
+                                disabled: true,
+                            }),
+                        );
+
+                        // Act
+                        act(() => {
+                            action(result, newValue);
+                        });
+
+                        // Assert
+                        expect(validate).not.toHaveBeenCalled();
+                    });
+                });
+
+                describe("required", () => {
+                    it("should have an errorMessage with the required text", () => {
+                        // Arrange
+                        const requiredText = "Required";
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "X",
+                                instantValidation,
+                                required: requiredText,
+                            }),
+                        );
+
+                        // Act
+                        act(() => {
+                            action(result, "");
+                        });
+
+                        // Assert
+                        expect(result.current.errorMessage).toBe(requiredText);
+                    });
+
+                    it("should call onValidate with the required text when it receives an empty string", () => {
+                        // Arrange
+                        const requiredText = "Required";
+                        const onValidate = jest.fn();
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "X",
+                                instantValidation,
+                                required: requiredText,
+                                onValidate,
+                            }),
+                        );
+                        onValidate.mockReset(); // Clear any initial calls to onValidate
+
+                        // Act
+                        act(() => {
+                            action(result, "");
+                        });
+
+                        // Assert
+                        expect(onValidate).toHaveBeenCalledExactlyOnceWith(
+                            requiredText,
+                        );
+                    });
+
+                    it("should have a null errorMessage when it receives is a non-empty string", () => {
+                        // Arrange
+                        const requiredText = "Required";
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "",
+                                instantValidation,
+                                required: requiredText,
+                            }),
+                        );
+
+                        // Act
+                        act(() => {
+                            action(result, "X");
+                        });
+
+                        // Assert
+                        expect(result.current.errorMessage).toBe(null);
+                    });
+
+                    it("should call onValidate with null when it receives a non-empty string", () => {
+                        // Arrange
+                        const requiredText = "Required";
+                        const onValidate = jest.fn();
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "",
+                                instantValidation,
+                                required: requiredText,
+                                onValidate,
+                            }),
+                        );
+                        onValidate.mockReset(); // Clear any initial calls to onValidate
+
+                        // Act
+                        act(() => {
+                            action(result, "X");
+                        });
+
+                        // Assert
+                        expect(onValidate).toHaveBeenCalledWith(null);
+                    });
+
+                    it("should have an errorMessage with the default required text if required is true", () => {
+                        // Arrange
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "X",
+                                instantValidation,
+                                required: true,
+                            }),
+                        );
+
+                        // Act
+                        act(() => {
+                            action(result, "");
+                        });
+
+                        // Assert
+                        expect(result.current.errorMessage).toBe(
+                            "This field is required.",
+                        );
+                    });
+
+                    it("should call onValidate with the default required text if required is true", () => {
+                        // Arrange
+                        const onValidate = jest.fn();
+                        const {result} = renderHook(() =>
+                            useFieldValidation({
+                                value: "X",
+                                instantValidation,
+                                required: true,
+                                onValidate,
+                            }),
+                        );
+                        onValidate.mockReset(); // Clear any initial calls to onValidate
+
+                        // Act
+                        act(() => {
+                            action(result, "");
+                        });
+
+                        // Assert
+                        expect(onValidate).toHaveBeenCalledExactlyOnceWith(
+                            "This field is required.",
+                        );
+                    });
+                });
+            },
+        );
+    });
+
+    describe("onChangeValidation", () => {
+        it("should validate onChange if instantValidation isn't provided", () => {
+            // Arrange
+            const validate = jest.fn();
+            const newValue = "X";
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "",
+                    validate,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onChangeValidation(newValue);
+            });
+
+            // Assert
+            expect(validate).toHaveBeenCalledWith(newValue);
+        });
+
+        it("should clear the errorMessage onChange if there was an error and instantValidation is false", () => {
+            // Arrange
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "T",
+                    instantValidation: false,
+                    validate: () => testErrorMessage,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onChangeValidation("Te");
+            });
+
+            // Assert
+            expect(result.current.errorMessage).toBe(null);
+        });
+
+        it("should call onValidate with null onChange if there was an error and instantValidation is false", () => {
+            // Arrange
+            const onValidate = jest.fn();
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "T",
+                    instantValidation: false,
+                    validate: () => testErrorMessage,
+                    onValidate,
+                }),
+            );
+            onValidate.mockReset(); // Clear any initial calls to onValidate
+
+            // Act
+            act(() => {
+                result.current.onChangeValidation("Te");
+            });
+
+            // Assert
+            expect(onValidate).toHaveBeenCalledExactlyOnceWith(null);
+        });
+
+        it("should not call validate onChange if instantValidation is false", () => {
+            // Arrange
+            const validate = jest.fn();
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "",
+                    instantValidation: false,
+                    validate,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onChangeValidation("X");
+            });
+
+            // Assert
+            expect(validate).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("onBlurValidation", () => {
+        it("should not validate onBlur if instantValidation isn't provided", () => {
+            // Arrange
+            const validate = jest.fn();
+            const newValue = "X";
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "",
+                    validate,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onBlurValidation(newValue);
+            });
+
+            // Assert
+            expect(validate).not.toHaveBeenCalled();
+        });
+
+        it("should not update errorMessage onBlur if instantValidation is true", () => {
+            // Arrange
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "",
+                    instantValidation: true,
+                    validate: () => testErrorMessage,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onBlurValidation("X");
+            });
+
+            // Assert
+            expect(result.current.errorMessage).toBe(null);
+        });
+
+        it("should not call validate onBlur if instantValidation is true", () => {
+            // Arrange
+            const validate = jest.fn();
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "",
+                    instantValidation: true,
+                    validate,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onBlurValidation("X");
+            });
+
+            // Assert
+            expect(validate).not.toHaveBeenCalled();
+        });
+
+        it("should not call onValidate onBlur if instantValidation is true", () => {
+            // Arrange
+            const onValidate = jest.fn();
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "",
+                    instantValidation: true,
+                    validate: () => testErrorMessage,
+                    onValidate,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onBlurValidation("X");
+            });
+
+            // Assert
+            expect(onValidate).not.toHaveBeenCalled();
+        });
+
+        it("should not call validate onBlur if newValue is empty and instantValidation is false", () => {
+            // Arrange
+            const validate = jest.fn();
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "",
+                    instantValidation: false,
+                    validate,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onBlurValidation("");
+            });
+
+            // Assert
+            expect(validate).not.toHaveBeenCalled();
+        });
+
+        it("should call validate onBlur if newValue is empty and it is required", () => {
+            // Arrange
+            const validate = jest.fn();
+            const {result} = renderHook(() =>
+                useFieldValidation({
+                    value: "",
+                    instantValidation: false,
+                    validate,
+                    required: true,
+                }),
+            );
+
+            // Act
+            act(() => {
+                result.current.onBlurValidation("");
+            });
+
+            // Assert
+            expect(validate).toHaveBeenCalledWith("");
+        });
+    });
+});
diff --git a/packages/wonder-blocks-form/src/hooks/use-field-validation.ts b/packages/wonder-blocks-form/src/hooks/use-field-validation.ts
new file mode 100644
index 000000000..2002e90d0
--- /dev/null
+++ b/packages/wonder-blocks-form/src/hooks/use-field-validation.ts
@@ -0,0 +1,149 @@
+import {useOnMountEffect} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+const defaultErrorMessage = "This field is required.";
+
+type FieldValidationProps = {
+    value: string;
+    disabled?: boolean;
+    validate?: (value: string) => string | null | void;
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
+    required?: boolean | string;
+    instantValidation?: boolean;
+};
+
+/**
+ * Hook for validation logic for text based fields. Based on the props provided,
+ * the hook will:
+ * - call the `validate` and `onValidate` props on initialization and mount
+ * - provide validation functions for specific events (onChange and onBlur).
+ * These functions will call the `validate` and `onValidate` props as needed.
+ *
+ * @param {FieldValidationProps} props An object with:
+ * - `value` - The value of the field.
+ * - `disabled` - If the field is disabled.
+ * - `required` - Whether the field is required to continue, or the error
+ * message if it is left blank.
+ * - `instantValidation` - If the field should be validated instantly.
+ * - `validate` - Validation for the field.
+ * - `onValidate` - Called after the `validate` prop is called.
+ * @returns {object} An object with:
+ * - `errorMessage` - The error message from validation.
+ * - `onBlurValidation` - Validation logic for when a field is blurred.
+ * - `onChangeValidation` - Validation logic for when a field changes.
+ *
+ * @example
+ *  export const MyComponent = ({
+ *     value,
+ *     disabled,
+ *     validate,
+ *     onValidate,
+ *     required,
+ *     instantValidation,
+ *  }) => {
+ *   const {errorMessage, onBlurValidation, onChangeValidation} =
+ *       useFieldValidation({
+ *           value,
+ *           disabled,
+ *           validate,
+ *           onValidate,
+ *           required,
+ *           instantValidation,
+ *       });
+ *     return (
+ *       <input
+ *           onBlur={(event) => {
+ *               onBlurValidation(event.target.value);
+ *           }}
+ *           onChange={(event) => {
+ *               onChangeValidation(event.target.value);
+ *           }}
+ *           aria-invalid={!!errorMessage}
+ *       />
+ *   );
+ * }
+ *
+ */
+export const useFieldValidation = ({
+    value,
+    disabled = false,
+    validate,
+    onValidate,
+    required = false,
+    instantValidation = true,
+}: FieldValidationProps) => {
+    const [errorMessage, setErrorMessage] = React.useState<string | null>(
+        // Ensures error is updated on unmounted server-side renders
+        // Pass in an initializer function so the validate prop is not called
+        // on every render here
+        () =>
+            (validate && value !== "" && !disabled && validate(value)) || null,
+    );
+
+    const onChangeValidation = (newValue: string) => {
+        if (instantValidation) {
+            handleValidation(newValue);
+        } else {
+            if (errorMessage) {
+                // If instantValidation is false and there is an error
+                // message, error needs to be cleared when the user updates
+                // the value
+                setErrorMessage(null);
+                if (onValidate) {
+                    onValidate(null);
+                }
+            }
+        }
+    };
+
+    const onBlurValidation = (newValue: string) => {
+        // Only handle validation on blur if instantValidation is false
+        if (!instantValidation) {
+            // Handle validation on blur if:
+            // 1. There is a value in the field so a user tabbing through
+            // fields doesn't trigger the error state when the field is left
+            // empty. Or,
+            // 2. The field is required. Tabbing through an empty field that
+            // is required will trigger the error state
+            if (newValue || required) {
+                handleValidation(newValue);
+            }
+        }
+    };
+
+    const handleValidation = (newValue: string) => {
+        // Should not handle validation if it is disabled
+        if (disabled) {
+            return;
+        }
+        if (validate) {
+            const error = validate(newValue) || null;
+            setErrorMessage(error);
+            if (onValidate) {
+                onValidate(error);
+            }
+        } else if (required) {
+            const requiredString =
+                typeof required === "string" ? required : defaultErrorMessage;
+            const error = newValue ? null : requiredString;
+            setErrorMessage(error);
+            if (onValidate) {
+                onValidate(error);
+            }
+        }
+    };
+
+    useOnMountEffect(() => {
+        // Only validate on mount if the value is not empty. This is so that fields
+        // don't render an error when they are initially empty
+        if (value !== "") {
+            handleValidation(value);
+        }
+    });
+
+    return {
+        errorMessage,
+        onBlurValidation,
+        onChangeValidation,
+    };
+};