diff --git a/packages/core/src/resetFormFields.ts b/packages/core/src/resetFormFields.ts
index abaecc1a6..f4948506d 100644
--- a/packages/core/src/resetFormFields.ts
+++ b/packages/core/src/resetFormFields.ts
@@ -161,8 +161,10 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
     return
   }
 
+  const resetEntireForm = !fieldNames || fieldNames.length === 0
+
   // If no specific fields provided, reset the entire form
-  if (!fieldNames || fieldNames.length === 0) {
+  if (resetEntireForm) {
     // Get all field names from both defaults and form elements (including disabled ones)
     const formData = new FormData(formElement)
     const formElementNames = Array.from(formElement.elements)
@@ -173,7 +175,7 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
 
   let hasChanged = false
 
-  fieldNames.forEach((fieldName) => {
+  fieldNames!.forEach((fieldName) => {
     const elements = formElement.elements.namedItem(fieldName)
 
     if (elements) {
@@ -184,7 +186,7 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
   })
 
   // Dispatch reset event if any field changed (matching native form.reset() behavior)
-  if (hasChanged) {
+  if (hasChanged && resetEntireForm) {
     formElement.dispatchEvent(new Event('reset', { bubbles: true }))
   }
 }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 8410727b9..505e7d6bc 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,4 +1,5 @@
 import { AxiosProgressEvent, AxiosResponse } from 'axios'
+import { NamedInputEvent, ValidationConfig, Validator } from 'laravel-precognition'
 import { Response } from './response'
 
 declare module 'axios' {
@@ -635,6 +636,9 @@ export type FormComponentProps = Partial<
   resetOnSuccess?: boolean | string[]
   resetOnError?: boolean | string[]
   setDefaultsOnSuccess?: boolean
+  validateFiles?: boolean
+  validationTimeout?: number
+  withAllErrors?: boolean
 }
 
 export type FormComponentMethods = {
@@ -647,6 +651,12 @@ export type FormComponentMethods = {
   defaults: () => void
   getData: () => Record<string, FormDataConvertible>
   getFormData: () => FormData
+  valid: (field: string) => boolean
+  invalid: (field: string) => boolean
+  validate(field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig): void
+  touch: (...fields: string[]) => void
+  touched(field?: string): boolean
+  validator: () => Validator
 }
 
 export type FormComponentonSubmitCompleteArguments = Pick<FormComponentMethods, 'reset' | 'defaults'>
@@ -659,6 +669,7 @@ export type FormComponentState = {
   wasSuccessful: boolean
   recentlySuccessful: boolean
   isDirty: boolean
+  validating: boolean
 }
 
 export type FormComponentSlotProps = FormComponentMethods & FormComponentState
diff --git a/packages/core/src/useFormUtils.ts b/packages/core/src/useFormUtils.ts
index a78df54ed..5cd821a86 100644
--- a/packages/core/src/useFormUtils.ts
+++ b/packages/core/src/useFormUtils.ts
@@ -1,3 +1,4 @@
+import { NamedInputEvent, ValidationConfig } from 'laravel-precognition'
 import {
   FormDataType,
   Method,
@@ -113,4 +114,34 @@ export class UseFormUtils {
     // Use Precognition endpoint with optional options...
     return { ...precognitionEndpoint!(), options: (args[0] as UseFormSubmitOptions) ?? {} }
   }
+
+  /**
+   * Merges headers into the Precognition validate() arguments.
+   */
+  public static mergeHeadersForValidation(
+    field?: string | NamedInputEvent | ValidationConfig,
+    config?: ValidationConfig,
+    headers?: Record<string, string>,
+  ): [string | NamedInputEvent | ValidationConfig | undefined, ValidationConfig | undefined] {
+    const merge = (config: ValidationConfig): ValidationConfig => {
+      config.headers = {
+        ...(headers ?? {}),
+        ...(config.headers ?? {}),
+      }
+
+      return config
+    }
+
+    if (field && typeof field === 'object' && !('target' in field)) {
+      field = merge(field)
+    } else if (config && typeof config === 'object') {
+      config = merge(config)
+    } else if (typeof field === 'string') {
+      config = merge(config ?? {})
+    } else {
+      field = merge(field ?? {})
+    }
+
+    return [field, config]
+  }
 }
diff --git a/packages/react/src/Form.ts b/packages/react/src/Form.ts
index 1de194c80..abcadcffa 100644
--- a/packages/react/src/Form.ts
+++ b/packages/react/src/Form.ts
@@ -8,8 +8,10 @@ import {
   mergeDataIntoQueryString,
   Method,
   resetFormFields,
+  UseFormUtils,
   VisitOptions,
 } from '@inertiajs/core'
+import { NamedInputEvent, ValidationConfig } from 'laravel-precognition'
 import { isEqual } from 'lodash-es'
 import React, {
   createElement,
@@ -64,12 +66,36 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       resetOnSuccess = false,
       setDefaultsOnSuccess = false,
       invalidateCacheTags = [],
+      validateFiles = false,
+      validationTimeout = 1500,
+      withAllErrors = false,
       children,
       ...props
     },
     ref,
   ) => {
+    const getTransformedData = (): Record<string, FormDataConvertible> => {
+      const [_url, data] = getUrlAndData()
+      return transform(data)
+    }
+
     const form = useForm<Record<string, any>>({})
+      .withPrecognition(
+        () => resolvedMethod,
+        () => getUrlAndData()[0],
+      )
+      .setValidationTimeout(validationTimeout)
+
+    if (validateFiles) {
+      form.validateFiles()
+    }
+
+    if (withAllErrors) {
+      form.withAllErrors()
+    }
+
+    form.transform(getTransformedData)
+
     const formElement = useRef<HTMLFormElement>(undefined)
 
     const resolvedMethod = useMemo(() => {
@@ -86,29 +112,62 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
     // expects an object, and submitting a FormData instance directly causes problems with nested objects.
     const getData = (): Record<string, FormDataConvertible> => formDataToObject(getFormData())
 
+    const getUrlAndData = (): [string, Record<string, FormDataConvertible>] => {
+      return mergeDataIntoQueryString(
+        resolvedMethod,
+        isUrlMethodPair(action) ? action.url : action,
+        getData(),
+        queryStringArrayFormat,
+      )
+    }
+
     const updateDirtyState = (event: Event) =>
       deferStateUpdate(() =>
         setIsDirty(event.type === 'reset' ? false : !isEqual(getData(), formDataToObject(defaultData.current))),
       )
 
+    const clearErrors = (...names: string[]) => {
+      form.clearErrors(...names)
+
+      return form
+    }
+
     useEffect(() => {
       defaultData.current = getFormData()
 
+      form.setDefaults(getData())
+
       const formEvents: Array<keyof HTMLElementEventMap> = ['input', 'change', 'reset']
 
       formEvents.forEach((e) => formElement.current!.addEventListener(e, updateDirtyState))
 
-      return () => formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))
+      return () => {
+        formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))
+      }
     }, [])
 
+    useEffect(() => {
+      form.setValidationTimeout(validationTimeout)
+    }, [validationTimeout])
+
+    useEffect(() => {
+      if (validateFiles) {
+        form.validateFiles()
+      } else {
+        form.withoutFileValidation()
+      }
+    }, [validateFiles])
+
     const reset = (...fields: string[]) => {
       if (formElement.current) {
         resetFormFields(formElement.current, defaultData.current, fields)
       }
+
+      form.reset(...fields)
     }
 
     const resetAndClearErrors = (...fields: string[]) => {
-      form.clearErrors(...fields)
+      clearErrors(...fields)
       reset(...fields)
     }
 
@@ -125,12 +184,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
     }
 
     const submit = () => {
-      const [url, _data] = mergeDataIntoQueryString(
-        resolvedMethod,
-        isUrlMethodPair(action) ? action.url : action,
-        getData(),
-        queryStringArrayFormat,
-      )
+      const [url, _data] = getUrlAndData()
 
       const submitOptions: FormSubmitOptions = {
         headers,
@@ -163,7 +217,6 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
         ...options,
       }
 
-      form.transform(() => transform(_data))
       form.submit(resolvedMethod, url, submitOptions)
     }
 
@@ -180,7 +233,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       wasSuccessful: form.wasSuccessful,
       recentlySuccessful: form.recentlySuccessful,
       isDirty,
-      clearErrors: form.clearErrors,
+      clearErrors,
       resetAndClearErrors,
       setError: form.setError,
       reset,
@@ -188,6 +241,16 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       defaults,
       getData,
       getFormData,
+
+      // Precognition
+      validator: () => form.validator(),
+      validating: form.validating,
+      valid: form.valid,
+      invalid: form.invalid,
+      validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) =>
+        form.validate(...UseFormUtils.mergeHeadersForValidation(field, config, headers)),
+      touch: form.touch,
+      touched: form.touched,
     })
 
     useImperativeHandle(ref, exposed, [form, isDirty, submit])
diff --git a/packages/react/src/useForm.ts b/packages/react/src/useForm.ts
index acd0b676d..730c2f4af 100644
--- a/packages/react/src/useForm.ts
+++ b/packages/react/src/useForm.ts
@@ -296,8 +296,10 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   const setDefaultsFunction = useCallback(
     (fieldOrFields?: FormDataKeys<TForm> | Partial<TForm>, maybeValue?: unknown) => {
       setDefaultsCalledInOnSuccess.current = true
+      let newDefaults = {} as TForm
 
       if (typeof fieldOrFields === 'undefined') {
+        newDefaults = { ...dataRef.current }
         setDefaults(dataRef.current)
         // If setData was called right before setDefaults, data was not
         // updated in that render yet, so we set a flag to update
@@ -305,11 +307,16 @@ export default function useForm<TForm extends FormDataType<TForm>>(
         setDataAsDefaults(true)
       } else {
         setDefaults((defaults) => {
-          return typeof fieldOrFields === 'string'
-            ? set(cloneDeep(defaults), fieldOrFields, maybeValue)
-            : Object.assign(cloneDeep(defaults), fieldOrFields)
+          newDefaults =
+            typeof fieldOrFields === 'string'
+              ? set(cloneDeep(defaults), fieldOrFields, maybeValue)
+              : Object.assign(cloneDeep(defaults), fieldOrFields)
+
+          return newDefaults as TForm
         })
       }
+
+      validatorRef.current?.defaults(newDefaults)
     },
     [setDefaults],
   )
@@ -496,7 +503,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
         const currentData = dataRef.current
         const transformedData = transform.current(currentData) as Record<string, unknown>
         return client[method](url, transformedData)
-      }, defaults)
+      }, cloneDeep(defaults))
 
       validatorRef.current = validator
 
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/BeforeValidation.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/BeforeValidation.tsx
new file mode 100644
index 000000000..e7258c4be
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/BeforeValidation.tsx
@@ -0,0 +1,55 @@
+import { Form } from '@inertiajs/react'
+import { isEqual } from 'lodash-es'
+
+export default function PrecognitionBefore() {
+  const handleBeforeValidation = (
+    newRequest: { data: Record<string, unknown> | null; touched: string[] },
+    oldRequest: { data: Record<string, unknown> | null; touched: string[] },
+  ) => {
+    const payloadIsCorrect =
+      isEqual(newRequest, { data: { name: 'block' }, touched: ['name'] }) &&
+      isEqual(oldRequest, { data: {}, touched: [] })
+
+    if (payloadIsCorrect && newRequest.data?.name === 'block') {
+      return false
+    }
+
+    return true
+  }
+
+  return (
+    <div>
+      <h1>Precognition - onBefore</h1>
+
+      <Form action="/precognition/default" method="post" validationTimeout={100}>
+        {({ errors, invalid, validate, validating }) => (
+          <>
+            <div>
+              <label htmlFor="name">Name:</label>
+              <input
+                id="name"
+                name="name"
+                onChange={() =>
+                  validate('name', {
+                    onBeforeValidation: handleBeforeValidation,
+                  })
+                }
+              />
+              {invalid('name') && <p className="error">{errors.name}</p>}
+            </div>
+
+            <div>
+              <label htmlFor="email">Email:</label>
+              <input id="email" name="email" onChange={() => validate('email')} />
+              {invalid('email') && <p className="error">{errors.email}</p>}
+            </div>
+
+            {validating && <p className="validating">Validating...</p>}
+
+            <button type="submit">Submit</button>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/Callbacks.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/Callbacks.tsx
new file mode 100644
index 000000000..c9e32d56a
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/Callbacks.tsx
@@ -0,0 +1,52 @@
+import { Form } from '@inertiajs/react'
+import { useState } from 'react'
+
+export default () => {
+  const [successCalled, setSuccessCalled] = useState(false)
+  const [errorCalled, setErrorCalled] = useState(false)
+  const [finishCalled, setFinishCalled] = useState(false)
+
+  return (
+    <div>
+      <h1>Form Precognition Callbacks</h1>
+
+      <h2>Callbacks Test</h2>
+      <Form action="/precognition/default" method="post" validationTimeout={100}>
+        {({ validate, validating, touch }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => touch('name')} />
+            </div>
+
+            {validating && <p>Validating...</p>}
+            {successCalled && <p>onPrecognitionSuccess called!</p>}
+            {errorCalled && <p>onValidationError called!</p>}
+            {finishCalled && <p>onFinish called!</p>}
+
+            <button
+              type="button"
+              onClick={() => {
+                setSuccessCalled(false)
+                setErrorCalled(false)
+                setFinishCalled(false)
+                validate({
+                  onPrecognitionSuccess: () => {
+                    setSuccessCalled(true)
+                  },
+                  onValidationError: () => {
+                    setErrorCalled(true)
+                  },
+                  onFinish: () => {
+                    setFinishCalled(true)
+                  },
+                })
+              }}
+            >
+              Validate
+            </button>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/Cancel.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/Cancel.tsx
new file mode 100644
index 000000000..40bd45516
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/Cancel.tsx
@@ -0,0 +1,25 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>Precognition - Cancel Tests</h1>
+
+      <h2>Auto Cancel Test</h2>
+      <Form action="/precognition/default?slow=1" method="post" validationTimeout={100}>
+        {({ invalid, errors, validate, validating }) => (
+          <>
+            <div>
+              <input id="auto-cancel-name-input" name="name" placeholder="Name" onBlur={() => validate('name')} />
+              {invalid('name') && <p className="error">{errors.name}</p>}
+            </div>
+
+            {validating && <p className="validating">Validating...</p>}
+
+            <button type="submit">Submit</button>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/Default.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/Default.tsx
new file mode 100644
index 000000000..705719db5
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/Default.tsx
@@ -0,0 +1,29 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>Form Precognition</h1>
+
+      <Form action="/precognition/default" method="post" validationTimeout={100}>
+        {({ invalid, errors, validate, valid, validating }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => validate('name')} />
+              {invalid('name') && <p>{errors.name}</p>}
+              {valid('name') && <p>Name is valid!</p>}
+            </div>
+
+            <div>
+              <input name="email" placeholder="Email" onBlur={() => validate('email')} />
+              {invalid('email') && <p>{errors.email}</p>}
+              {valid('email') && <p>Email is valid!</p>}
+            </div>
+
+            {validating && <p>Validating...</p>}
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/Files.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/Files.tsx
new file mode 100644
index 000000000..895f398ef
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/Files.tsx
@@ -0,0 +1,40 @@
+import { Form } from '@inertiajs/react'
+import { useState } from 'react'
+
+export default () => {
+  const [validateFilesEnabled, setValidateFilesEnabled] = useState(false)
+
+  return (
+    <div>
+      <h1>Form Precognition Files</h1>
+
+      <Form action="/precognition/files" method="post" validationTimeout={100} validateFiles={validateFilesEnabled}>
+        {({ invalid, errors, validate, valid, validating }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => validate('name')} />
+              {invalid('name') && <p>{errors.name}</p>}
+              {valid('name') && <p>Name is valid!</p>}
+            </div>
+
+            <div>
+              <input type="file" name="avatar" id="avatar" />
+              {invalid('avatar') && <p>{errors.avatar}</p>}
+              {valid('avatar') && <p>Avatar is valid!</p>}
+            </div>
+
+            {validating && <p>Validating...</p>}
+
+            <button type="button" onClick={() => setValidateFilesEnabled(!validateFilesEnabled)}>
+              Toggle Validate Files ({validateFilesEnabled ? 'enabled' : 'disabled'})
+            </button>
+
+            <button type="button" onClick={() => validate({ only: ['name', 'avatar'] })}>
+              Validate Both
+            </button>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/Headers.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/Headers.tsx
new file mode 100644
index 000000000..9a698f2f5
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/Headers.tsx
@@ -0,0 +1,29 @@
+import { Form } from '@inertiajs/react'
+
+export default function PrecognitionHeaders() {
+  return (
+    <div>
+      <h1>Precognition - Custom Headers</h1>
+
+      <Form
+        action="/precognition/headers"
+        method="post"
+        headers={{ 'X-Custom-Header': 'custom-value' }}
+        validationTimeout={100}
+      >
+        {({ invalid, errors, validate, validating }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => validate('name')} />
+              {invalid('name') && <p>{errors.name}</p>}
+            </div>
+
+            {validating && <p>Validating...</p>}
+
+            <button type="submit">Submit</button>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/Methods.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/Methods.tsx
new file mode 100644
index 000000000..d354fece1
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/Methods.tsx
@@ -0,0 +1,62 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>Form Precognition - Touch, Reset & Validate</h1>
+
+      <Form action="/precognition/default" method="post" validationTimeout={100}>
+        {({ invalid, errors, validate, touch, touched, validating, reset }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => touch('name')} />
+              {invalid('name') && <p>{errors.name}</p>}
+            </div>
+
+            <div>
+              <input name="email" placeholder="Email" onBlur={() => touch('email')} />
+              {invalid('email') && <p>{errors.email}</p>}
+            </div>
+
+            {validating && <p>Validating...</p>}
+
+            <p id="name-touched">{touched('name') ? 'Name is touched' : 'Name is not touched'}</p>
+            <p id="email-touched">{touched('email') ? 'Email is touched' : 'Email is not touched'}</p>
+            <p id="any-touched">{touched() ? 'Form has touched fields' : 'Form has no touched fields'}</p>
+
+            <button type="button" onClick={() => validate()}>
+              Validate All Touched
+            </button>
+            <button type="button" onClick={() => validate('name')}>
+              Validate Name
+            </button>
+            <button type="button" onClick={() => validate({ only: ['name', 'email'] })}>
+              Validate Name and Email
+            </button>
+            <button type="button" onClick={() => touch('name', 'email')}>
+              Touch Name and Email
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                touch('name')
+                touch('name')
+              }}
+            >
+              Touch Name Twice
+            </button>
+            <button type="button" onClick={() => reset()}>
+              Reset All
+            </button>
+            <button type="button" onClick={() => reset('name')}>
+              Reset Name
+            </button>
+            <button type="button" onClick={() => reset('name', 'email')}>
+              Reset Name and Email
+            </button>
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/Transform.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/Transform.tsx
new file mode 100644
index 000000000..14df3b05f
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/Transform.tsx
@@ -0,0 +1,28 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>Form Precognition Transform</h1>
+
+      <Form
+        action="/precognition/default"
+        method="post"
+        validationTimeout={100}
+        transform={(data) => ({ name: String(data.name || '').repeat(2) })}
+      >
+        {({ invalid, errors, validate, valid, validating }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => validate('name')} />
+              {invalid('name') && <p>{errors.name}</p>}
+              {valid('name') && <p>Name is valid!</p>}
+            </div>
+
+            {validating && <p>Validating...</p>}
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/WithAllErrors.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/WithAllErrors.tsx
new file mode 100644
index 000000000..718a77e8f
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/WithAllErrors.tsx
@@ -0,0 +1,53 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>Form Precognition - All Errors</h1>
+
+      <Form action="/precognition/with-all-errors" method="post" validationTimeout={100} withAllErrors>
+        {({ invalid, errors, validate, valid, validating }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => validate('name')} />
+              {invalid('name') && (
+                <div>
+                  {Array.isArray(errors.name) ? (
+                    errors.name.map((error, index) => (
+                      <p key={index} id={`name-error-${index}`}>
+                        {error}
+                      </p>
+                    ))
+                  ) : (
+                    <p id="name-error-0">{errors.name}</p>
+                  )}
+                </div>
+              )}
+              {valid('name') && <p>Name is valid!</p>}
+            </div>
+
+            <div>
+              <input name="email" placeholder="Email" onBlur={() => validate('email')} />
+              {invalid('email') && (
+                <div>
+                  {Array.isArray(errors.email) ? (
+                    errors.email.map((error, index) => (
+                      <p key={index} id={`email-error-${index}`}>
+                        {error}
+                      </p>
+                    ))
+                  ) : (
+                    <p id="email-error-0">{errors.email}</p>
+                  )}
+                </div>
+              )}
+              {valid('email') && <p>Email is valid!</p>}
+            </div>
+
+            {validating && <p>Validating...</p>}
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.tsx b/packages/react/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.tsx
new file mode 100644
index 000000000..1553499bf
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.tsx
@@ -0,0 +1,29 @@
+import { Form } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <h1>Form Precognition - Array Errors</h1>
+
+      <Form action="/precognition/with-all-errors" method="post" validationTimeout={100}>
+        {({ invalid, errors, validate, valid, validating }) => (
+          <>
+            <div>
+              <input name="name" placeholder="Name" onBlur={() => validate('name')} />
+              {invalid('name') && <p>{errors.name}</p>}
+              {valid('name') && <p>Name is valid!</p>}
+            </div>
+
+            <div>
+              <input name="email" placeholder="Email" onBlur={() => validate('email')} />
+              {invalid('email') && <p>{errors.email}</p>}
+              {valid('email') && <p>Email is valid!</p>}
+            </div>
+
+            {validating && <p>Validating...</p>}
+          </>
+        )}
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Ref.tsx b/packages/react/test-app/Pages/FormComponent/Ref.tsx
index 4723b4f95..3cd5f73b8 100644
--- a/packages/react/test-app/Pages/FormComponent/Ref.tsx
+++ b/packages/react/test-app/Pages/FormComponent/Ref.tsx
@@ -29,6 +29,14 @@ export default function Ref() {
     formRef.current?.defaults()
   }
 
+  const callPrecognitionMethods = () => {
+    const validator = formRef.current?.validator()
+
+    if (validator && !formRef.current?.touched('company') && !formRef.current?.valid('company')) {
+      formRef.current?.validate({ only: ['company'] })
+    }
+  }
+
   return (
     <div>
       <h1>Form Ref Test</h1>
@@ -63,6 +71,7 @@ export default function Ref() {
         <button onClick={clearAllErrors}>Clear Errors</button>
         <button onClick={setTestError}>Set Test Error</button>
         <button onClick={setCurrentAsDefaults}>Set Current as Defaults</button>
+        <button onClick={callPrecognitionMethods}>Call Precognition Methods</button>
       </div>
     </div>
   )
diff --git a/packages/svelte/src/components/Form.svelte b/packages/svelte/src/components/Form.svelte
index 0206a8630..ae82bacc4 100644
--- a/packages/svelte/src/components/Form.svelte
+++ b/packages/svelte/src/components/Form.svelte
@@ -9,7 +9,9 @@
     type FormDataConvertible,
     type VisitOptions,
     isUrlMethodPair,
+    UseFormUtils,
   } from '@inertiajs/core'
+  import { type NamedInputEvent, type ValidationConfig, type Validator } from 'laravel-precognition'
   import { isEqual } from 'lodash-es'
   import { onMount } from 'svelte'
   import useForm from '../useForm'
@@ -38,10 +40,34 @@
   export let resetOnError: FormComponentProps['resetOnError'] = false
   export let resetOnSuccess: FormComponentProps['resetOnSuccess'] = false
   export let setDefaultsOnSuccess: FormComponentProps['setDefaultsOnSuccess'] = false
+  export let validateFiles: FormComponentProps['validateFiles'] = false
+  export let validationTimeout: FormComponentProps['validationTimeout'] = 1500
+  export let withAllErrors: FormComponentProps['withAllErrors'] = false
 
   type FormSubmitOptions = Omit<VisitOptions, 'data' | 'onPrefetched' | 'onPrefetching'>
 
-  const form = useForm({})
+  function getTransformedData(): Record<string, FormDataConvertible> {
+    const [_url, data] = getUrlAndData()
+    return transform!(data)
+  }
+
+  const form = useForm<Record<string, any>>({})
+    .withPrecognition(
+      () => _method,
+      () => getUrlAndData()[0],
+    )
+    .setValidationTimeout(validationTimeout!)
+
+  if (validateFiles) {
+    form.validateFiles()
+  }
+
+  if (withAllErrors) {
+    form.withAllErrors()
+  }
+
+  form.transform(getTransformedData)
+
   let formElement: HTMLFormElement
   let isDirty = false
   let defaultData: FormData = new FormData()
@@ -60,12 +86,16 @@
     return formDataToObject(getFormData())
   }
 
+  function getUrlAndData(): [string, Record<string, FormDataConvertible>] {
+    return mergeDataIntoQueryString(_method, _action, getData(), queryStringArrayFormat)
+  }
+
   function updateDirtyState(event: Event) {
     isDirty = event.type === 'reset' ? false : !isEqual(getData(), formDataToObject(defaultData))
   }
 
   export function submit() {
-    const [url, _data] = mergeDataIntoQueryString(_method, _action, getData(), queryStringArrayFormat)
+    const [url, _data] = getUrlAndData()
 
     const maybeReset = (resetOption: boolean | string[] | undefined) => {
       if (!resetOption) {
@@ -137,26 +167,21 @@
 
   export function reset(...fields: string[]) {
     resetFormFields(formElement, defaultData, fields)
+
+    form.reset(...fields)
   }
 
   export function clearErrors(...fields: string[]) {
-    // @ts-expect-error
     $form.clearErrors(...fields)
   }
 
   export function resetAndClearErrors(...fields: string[]) {
-    // @ts-expect-error
-    $form.clearErrors(...fields)
+    clearErrors(...fields)
     reset(...fields)
   }
 
-  export function setError(field: string | object, value?: string) {
-    if (typeof field === 'string') {
-      // @ts-expect-error
-      $form.setError(field, value)
-    } else {
-      $form.setError(field)
-    }
+  export function setError(fieldOrFields: string | Record<string, string>, maybeValue?: string) {
+    $form.setError((typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields) as Errors)
   }
 
   export function defaults() {
@@ -164,16 +189,54 @@
     isDirty = false
   }
 
+  export function validate(field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) {
+    return form.validate(...UseFormUtils.mergeHeadersForValidation(field, config, headers!))
+  }
+
+  export function valid(field: string) {
+    return form.valid(field)
+  }
+
+  export function invalid(field: string) {
+    return form.invalid(field)
+  }
+
+  export function touch(field: string | NamedInputEvent | string[], ...fields: string[]) {
+    return form.touch(field, ...fields)
+  }
+
+  export function touched(field?: string) {
+    return form.touched(field)
+  }
+
+  export function validator(): Validator {
+    return form.validator()
+  }
+
   onMount(() => {
     defaultData = getFormData()
 
+    form.defaults(getData())
+
     const formEvents = ['input', 'change', 'reset']
+
     formEvents.forEach((e) => formElement.addEventListener(e, updateDirtyState))
 
     return () => {
       formEvents.forEach((e) => formElement?.removeEventListener(e, updateDirtyState))
     }
   })
+
+  $: {
+    form.setValidationTimeout(validationTimeout!)
+
+    if (validateFiles) {
+      form.validateFiles()
+    } else {
+      form.withoutFileValidation()
+    }
+  }
+
   $: slotErrors = $form.errors as Errors
 </script>
 
@@ -199,7 +262,15 @@
     {isDirty}
     {submit}
     {defaults}
+    {reset}
     {getData}
     {getFormData}
+    {validator}
+    {validate}
+    {touch}
+    validating={$form.validating}
+    valid={$form.valid}
+    invalid={$form.invalid}
+    touched={$form.touched}
   />
 </form>
diff --git a/packages/svelte/src/useForm.ts b/packages/svelte/src/useForm.ts
index b3eaf3d0c..c65656b25 100644
--- a/packages/svelte/src/useForm.ts
+++ b/packages/svelte/src/useForm.ts
@@ -152,7 +152,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
         const form = formWithPrecognition()
         const transformedData = transform(form.data()) as Record<string, unknown>
         return client[method](url, transformedData)
-      }, defaults)
+      }, cloneDeep(defaults))
 
       validatorRef = validator
 
@@ -292,6 +292,8 @@ export default function useForm<TForm extends FormDataType<TForm>>(
             : Object.assign(cloneDeep(defaults), fieldOrFields)
       }
 
+      validatorRef?.defaults(defaults)
+
       return this
     },
     reset(...fields: Array<FormDataKeys<TForm>>) {
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/BeforeValidation.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/BeforeValidation.svelte
new file mode 100644
index 000000000..b311c6aaa
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/BeforeValidation.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { isEqual } from 'lodash-es'
+  import { Form } from '@inertiajs/svelte'
+
+  const handleBeforeValidation = (
+    newRequest: { data: Record<string, unknown> | null; touched: string[] },
+    oldRequest: { data: Record<string, unknown> | null; touched: string[] },
+  ) => {
+    const payloadIsCorrect =
+      isEqual(newRequest, { data: { name: 'block' }, touched: ['name'] }) &&
+      isEqual(oldRequest, { data: {}, touched: [] })
+
+    // Block validation if name is "block"
+    if (payloadIsCorrect && newRequest.data?.name === 'block') {
+      return false
+    }
+
+    return true
+  }
+</script>
+
+<div>
+  <h1>Precognition - onBefore</h1>
+
+  <Form
+    action="/precognition/default"
+    method="post"
+    let:errors
+    let:invalid
+    let:validate
+    let:validating
+    validationTimeout={100}
+  >
+    <div>
+      <label for="name">Name:</label>
+      <input
+        id="name"
+        name="name"
+        on:change={() =>
+          validate('name', {
+            onBeforeValidation: handleBeforeValidation,
+          })}
+      />
+      {#if invalid('name')}
+        <p class="error">{errors.name}</p>
+      {/if}
+    </div>
+
+    <div>
+      <label for="email">Email:</label>
+      <input id="email" name="email" on:change={() => validate('email')} />
+      {#if invalid('email')}
+        <p class="error">{errors.email}</p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p class="validating">Validating...</p>
+    {/if}
+
+    <button type="submit">Submit</button>
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/Callbacks.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/Callbacks.svelte
new file mode 100644
index 000000000..be399d623
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/Callbacks.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+
+  let successCalled = false
+  let errorCalled = false
+  let finishCalled = false
+</script>
+
+<div>
+  <h1>Form Precognition Callbacks</h1>
+
+  <h2>Callbacks Test</h2>
+  <Form action="/precognition/default" method="post" validationTimeout={100} let:validate let:validating let:touch>
+    <div>
+      <input name="name" placeholder="Name" on:blur={() => touch('name')} />
+    </div>
+
+    {#if validating}
+      <p>Validating...</p>
+    {/if}
+    {#if successCalled}
+      <p>onPrecognitionSuccess called!</p>
+    {/if}
+    {#if errorCalled}
+      <p>onValidationError called!</p>
+    {/if}
+    {#if finishCalled}
+      <p>onFinish called!</p>
+    {/if}
+
+    <button
+      type="button"
+      on:click={() => {
+        successCalled = false
+        errorCalled = false
+        finishCalled = false
+        validate({
+          onPrecognitionSuccess: () => {
+            successCalled = true
+          },
+          onValidationError: () => {
+            errorCalled = true
+          },
+          onFinish: () => {
+            finishCalled = true
+          },
+        })
+      }}
+    >
+      Validate
+    </button>
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/Cancel.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/Cancel.svelte
new file mode 100644
index 000000000..ae2daba25
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/Cancel.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+</script>
+
+<div>
+  <h1>Precognition - Cancel Tests</h1>
+
+  <h2>Auto Cancel Test</h2>
+  <Form
+    action="/precognition/default?slow=1"
+    method="post"
+    validationTimeout={100}
+    let:invalid
+    let:errors
+    let:validate
+    let:validating
+  >
+    <div>
+      <input id="auto-cancel-name-input" name="name" placeholder="Name" on:blur={() => validate('name')} />
+      {#if invalid('name')}
+        <p class="error">
+          {errors.name}
+        </p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p class="validating">Validating...</p>
+    {/if}
+
+    <button type="submit">Submit</button>
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/Default.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/Default.svelte
new file mode 100644
index 000000000..0835f2382
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/Default.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+</script>
+
+<div>
+  <h1>Form Precognition</h1>
+
+  <Form
+    action="/precognition/default"
+    method="post"
+    validationTimeout={100}
+    let:invalid
+    let:errors
+    let:validate
+    let:valid
+    let:validating
+  >
+    <div>
+      <input name="name" placeholder="Name" on:blur={() => validate('name')} />
+      {#if invalid('name')}
+        <p>{errors.name}</p>
+      {/if}
+      {#if valid('name')}
+        <p>Name is valid!</p>
+      {/if}
+    </div>
+
+    <div>
+      <input name="email" placeholder="Email" on:blur={() => validate('email')} />
+      {#if invalid('email')}
+        <p>{errors.email}</p>
+      {/if}
+      {#if valid('email')}
+        <p>Email is valid!</p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p>Validating...</p>
+    {/if}
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/Files.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/Files.svelte
new file mode 100644
index 000000000..6b7116f52
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/Files.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+
+  let validateFilesEnabled = false
+</script>
+
+<div>
+  <h1>Form Precognition Files</h1>
+
+  <Form
+    action="/precognition/files"
+    method="post"
+    validationTimeout={100}
+    validateFiles={validateFilesEnabled}
+    let:invalid
+    let:errors
+    let:validate
+    let:valid
+    let:validating
+  >
+    <div>
+      <input name="name" placeholder="Name" on:blur={() => validate('name')} />
+      {#if invalid('name')}
+        <p>{errors.name}</p>
+      {/if}
+      {#if valid('name')}
+        <p>Name is valid!</p>
+      {/if}
+    </div>
+
+    <div>
+      <input type="file" name="avatar" id="avatar" />
+      {#if invalid('avatar')}
+        <p>{errors.avatar}</p>
+      {/if}
+      {#if valid('avatar')}
+        <p>Avatar is valid!</p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p>Validating...</p>
+    {/if}
+
+    <button type="button" on:click={() => (validateFilesEnabled = !validateFilesEnabled)}>
+      Toggle Validate Files ({validateFilesEnabled ? 'enabled' : 'disabled'})
+    </button>
+
+    <button type="button" on:click={() => validate({ only: ['name', 'avatar'] })}>Validate Both</button>
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/Headers.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/Headers.svelte
new file mode 100644
index 000000000..6b3a00240
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/Headers.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+</script>
+
+<div>
+  <h1>Precognition - Custom Headers</h1>
+
+  <Form
+    action="/precognition/headers"
+    method="post"
+    headers={{ 'X-Custom-Header': 'custom-value' }}
+    validationTimeout={100}
+    let:invalid
+    let:errors
+    let:validate
+    let:validating
+  >
+    <div>
+      <input name="name" placeholder="Name" on:blur={() => validate('name')} />
+      {#if invalid('name')}
+        <p>
+          {errors.name}
+        </p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p>Validating...</p>
+    {/if}
+
+    <button type="submit">Submit</button>
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/Methods.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/Methods.svelte
new file mode 100644
index 000000000..b99084087
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/Methods.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+</script>
+
+<div>
+  <h1>Form Precognition - Touch, Reset & Validate</h1>
+
+  <Form
+    action="/precognition/default"
+    method="post"
+    validationTimeout={100}
+    let:invalid
+    let:errors
+    let:validate
+    let:touch
+    let:touched
+    let:validating
+    let:reset
+  >
+    <div>
+      <input name="name" placeholder="Name" on:blur={() => touch('name')} />
+      {#if invalid('name')}
+        <p>{errors.name}</p>
+      {/if}
+    </div>
+
+    <div>
+      <input name="email" placeholder="Email" on:blur={() => touch('email')} />
+      {#if invalid('email')}
+        <p>{errors.email}</p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p>Validating...</p>
+    {/if}
+
+    <p id="name-touched">{touched('name') ? 'Name is touched' : 'Name is not touched'}</p>
+    <p id="email-touched">{touched('email') ? 'Email is touched' : 'Email is not touched'}</p>
+    <p id="any-touched">{touched() ? 'Form has touched fields' : 'Form has no touched fields'}</p>
+
+    <button type="button" on:click={() => validate()}>Validate All Touched</button>
+    <button type="button" on:click={() => validate('name')}>Validate Name</button>
+    <button type="button" on:click={() => validate({ only: ['name', 'email'] })}>Validate Name and Email</button>
+    <button type="button" on:click={() => touch('name', 'email')}>Touch Name and Email</button>
+    <button
+      type="button"
+      on:click={() => {
+        touch('name')
+        touch('name')
+      }}
+    >
+      Touch Name Twice
+    </button>
+    <button type="button" on:click={() => reset()}>Reset All</button>
+    <button type="button" on:click={() => reset('name')}>Reset Name</button>
+    <button type="button" on:click={() => reset('name', 'email')}>Reset Name and Email</button>
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/Transform.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/Transform.svelte
new file mode 100644
index 000000000..027305c95
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/Transform.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+</script>
+
+<div>
+  <h1>Form Precognition Transform</h1>
+
+  <Form
+    action="/precognition/default"
+    method="post"
+    validationTimeout={100}
+    transform={(data) => ({ name: String(data.name || '').repeat(2) })}
+    let:invalid
+    let:errors
+    let:validate
+    let:valid
+    let:validating
+  >
+    <div>
+      <input name="name" placeholder="Name" on:blur={() => validate('name')} />
+      {#if invalid('name')}
+        <p>{errors.name}</p>
+      {/if}
+      {#if valid('name')}
+        <p>Name is valid!</p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p>Validating...</p>
+    {/if}
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/WithAllErrors.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/WithAllErrors.svelte
new file mode 100644
index 000000000..481aed263
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/WithAllErrors.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+</script>
+
+<div>
+  <h1>Form Precognition - All Errors</h1>
+
+  <Form
+    action="/precognition/with-all-errors"
+    method="post"
+    validationTimeout={100}
+    withAllErrors
+    let:invalid
+    let:errors
+    let:validate
+    let:valid
+    let:validating
+  >
+    <div>
+      <input name="name" placeholder="Name" on:blur={() => validate('name')} />
+      {#if invalid('name')}
+        <div>
+          {#if Array.isArray(errors.name)}
+            {#each errors.name as error, index (index)}
+              <p id="name-error-{index}">{error}</p>
+            {/each}
+          {:else}
+            <p id="name-error-0">{errors.name}</p>
+          {/if}
+        </div>
+      {/if}
+      {#if valid('name')}
+        <p>Name is valid!</p>
+      {/if}
+    </div>
+
+    <div>
+      <input name="email" placeholder="Email" on:blur={() => validate('email')} />
+      {#if invalid('email')}
+        <div>
+          {#if Array.isArray(errors.email)}
+            {#each errors.email as error, index (index)}
+              <p id="email-error-{index}">{error}</p>
+            {/each}
+          {:else}
+            <p id="email-error-0">{errors.email}</p>
+          {/if}
+        </div>
+      {/if}
+      {#if valid('email')}
+        <p>Email is valid!</p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p>Validating...</p>
+    {/if}
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.svelte b/packages/svelte/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.svelte
new file mode 100644
index 000000000..036f87996
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+</script>
+
+<div>
+  <h1>Form Precognition - Array Errors</h1>
+
+  <Form
+    action="/precognition/with-all-errors"
+    method="post"
+    validationTimeout={100}
+    let:invalid
+    let:errors
+    let:validate
+    let:valid
+    let:validating
+  >
+    <div>
+      <input name="name" placeholder="Name" on:blur={() => validate('name')} />
+      {#if invalid('name')}
+        <p>{errors.name}</p>
+      {/if}
+      {#if valid('name')}
+        <p>Name is valid!</p>
+      {/if}
+    </div>
+
+    <div>
+      <input name="email" placeholder="Email" on:blur={() => validate('email')} />
+      {#if invalid('email')}
+        <p>{errors.email}</p>
+      {/if}
+      {#if valid('email')}
+        <p>Email is valid!</p>
+      {/if}
+    </div>
+
+    {#if validating}
+      <p>Validating...</p>
+    {/if}
+  </Form>
+</div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Ref.svelte b/packages/svelte/test-app/Pages/FormComponent/Ref.svelte
index 301946794..4669b5649 100644
--- a/packages/svelte/test-app/Pages/FormComponent/Ref.svelte
+++ b/packages/svelte/test-app/Pages/FormComponent/Ref.svelte
@@ -28,6 +28,14 @@
   function setCurrentAsDefaults() {
     formRef?.defaults()
   }
+
+  function callPrecognitionMethods() {
+    const validator = formRef?.validator()
+
+    if (validator && !formRef?.touched('company') && !formRef?.valid('company')) {
+      formRef?.validate({ only: ['company'] })
+    }
+  }
 </script>
 
 <div>
@@ -63,5 +71,6 @@
     <button on:click={clearAllErrors}> Clear Errors </button>
     <button on:click={setTestError}> Set Test Error </button>
     <button on:click={setCurrentAsDefaults}> Set Current as Defaults </button>
+    <button on:click={callPrecognitionMethods}> Call Precognition Methods </button>
   </div>
 </div>
diff --git a/packages/vue3/src/form.ts b/packages/vue3/src/form.ts
index e5dafb6f6..72a309892 100644
--- a/packages/vue3/src/form.ts
+++ b/packages/vue3/src/form.ts
@@ -9,10 +9,12 @@ import {
   mergeDataIntoQueryString,
   Method,
   resetFormFields,
+  UseFormUtils,
   VisitOptions,
 } from '@inertiajs/core'
+import { NamedInputEvent, ValidationConfig } from 'laravel-precognition'
 import { isEqual } from 'lodash-es'
-import { computed, defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, SlotsType } from 'vue'
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, SlotsType, watch } from 'vue'
 import useForm from './useForm'
 
 type FormSubmitOptions = Omit<VisitOptions, 'data' | 'onPrefetched' | 'onPrefetching'>
@@ -113,9 +115,42 @@ const Form = defineComponent({
       type: [String, Array] as PropType<FormComponentProps['invalidateCacheTags']>,
       default: () => [],
     },
+    validateFiles: {
+      type: Boolean as PropType<FormComponentProps['validateFiles']>,
+      default: false,
+    },
+    validationTimeout: {
+      type: Number as PropType<FormComponentProps['validationTimeout']>,
+      default: 1500,
+    },
+    withAllErrors: {
+      type: Boolean as PropType<FormComponentProps['withAllErrors']>,
+      default: false,
+    },
   },
   setup(props, { slots, attrs, expose }) {
+    const getTransformedData = (): Record<string, FormDataConvertible> => {
+      const [_url, data] = getUrlAndData()
+
+      return props.transform(data)
+    }
+
     const form = useForm<Record<string, any>>({})
+      .withPrecognition(
+        () => method.value,
+        () => getUrlAndData()[0],
+      )
+      .transform(getTransformedData)
+      .setValidationTimeout(props.validationTimeout)
+
+    if (props.validateFiles) {
+      form.validateFiles()
+    }
+
+    if (props.withAllErrors) {
+      form.withAllErrors()
+    }
+
     const formElement = ref()
     const method = computed(() =>
       isUrlMethodPair(props.action) ? props.action.method : (props.method.toLowerCase() as Method),
@@ -137,9 +172,22 @@ const Form = defineComponent({
 
     onMounted(() => {
       defaultData.value = getFormData()
+
+      form.defaults(getData())
+
       formEvents.forEach((e) => formElement.value.addEventListener(e, onFormUpdate))
     })
 
+    watch(
+      () => props.validateFiles,
+      (value) => (value ? form.validateFiles() : form.withoutFileValidation()),
+    )
+
+    watch(
+      () => props.validationTimeout,
+      (value) => form.setValidationTimeout(value),
+    )
+
     onBeforeUnmount(() => formEvents.forEach((e) => formElement.value?.removeEventListener(e, onFormUpdate)))
 
     const getFormData = (): FormData => new FormData(formElement.value)
@@ -149,14 +197,16 @@ const Form = defineComponent({
     // expects an object, and submitting a FormData instance directly causes problems with nested objects.
     const getData = (): Record<string, FormDataConvertible> => formDataToObject(getFormData())
 
-    const submit = () => {
-      const [action, data] = mergeDataIntoQueryString(
+    const getUrlAndData = (): [string, Record<string, FormDataConvertible>] => {
+      return mergeDataIntoQueryString(
         method.value,
         isUrlMethodPair(props.action) ? props.action.url : props.action,
         getData(),
         props.queryStringArrayFormat,
       )
+    }
 
+    const submit = () => {
       const maybeReset = (resetOption: boolean | string[]) => {
         if (!resetOption) {
           return
@@ -197,16 +247,24 @@ const Form = defineComponent({
         ...props.options,
       }
 
+      const [url, data] = getUrlAndData()
+
       // We need transform because we can't override the default data with different keys (by design)
-      form.transform(() => props.transform(data)).submit(method.value, action, submitOptions)
+      form.transform(() => props.transform(data)).submit(method.value, url, submitOptions)
     }
 
     const reset = (...fields: string[]) => {
       resetFormFields(formElement.value, defaultData.value, fields)
+
+      form.reset(...fields)
     }
 
-    const resetAndClearErrors = (...fields: string[]) => {
+    const clearErrors = (...fields: string[]) => {
       form.clearErrors(...fields)
+    }
+
+    const resetAndClearErrors = (...fields: string[]) => {
+      clearErrors(...fields)
       reset(...fields)
     }
 
@@ -234,7 +292,10 @@ const Form = defineComponent({
       get recentlySuccessful() {
         return form.recentlySuccessful
       },
-      clearErrors: (...fields: string[]) => form.clearErrors(...fields),
+      get validating() {
+        return form.validating
+      },
+      clearErrors,
       resetAndClearErrors,
       setError: (fieldOrFields: string | Record<string, string>, maybeValue?: string) =>
         form.setError((typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields) as Errors),
@@ -246,6 +307,15 @@ const Form = defineComponent({
       defaults,
       getData,
       getFormData,
+
+      // Precognition
+      touch: form.touch,
+      valid: form.valid,
+      invalid: form.invalid,
+      touched: form.touched,
+      validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) =>
+        form.validate(...UseFormUtils.mergeHeadersForValidation(field, config, props.headers)),
+      validator: () => form.validator(),
     }
 
     expose<FormComponentRef>(exposed)
diff --git a/packages/vue3/src/useForm.ts b/packages/vue3/src/useForm.ts
index 2001a0ec2..f89a4c6c5 100644
--- a/packages/vue3/src/useForm.ts
+++ b/packages/vue3/src/useForm.ts
@@ -154,7 +154,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
         const transformedData = transform(this.data()) as Record<string, unknown>
 
         return client[method](url, transformedData)
-      }, defaults)
+      }, cloneDeep(defaults))
 
       validatorRef = validator
 
@@ -265,6 +265,8 @@ export default function useForm<TForm extends FormDataType<TForm>>(
             : Object.assign({}, cloneDeep(defaults), fieldOrFields)
       }
 
+      validatorRef?.defaults(defaults)
+
       return this
     },
     reset(...fields: FormDataKeys<TForm>[]) {
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/BeforeValidation.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/BeforeValidation.vue
new file mode 100644
index 000000000..9ffcb6a81
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/BeforeValidation.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+import { isEqual } from 'lodash-es'
+
+const handleBeforeValidation = (
+  newRequest: { data: Record<string, unknown> | null; touched: string[] },
+  oldRequest: { data: Record<string, unknown> | null; touched: string[] },
+) => {
+  const payloadIsCorrect =
+    isEqual(newRequest, { data: { name: 'block' }, touched: ['name'] }) &&
+    isEqual(oldRequest, { data: {}, touched: [] })
+
+  if (payloadIsCorrect && newRequest.data?.name === 'block') {
+    return false
+  }
+
+  return true
+}
+</script>
+
+<template>
+  <div>
+    <h1>Precognition - onBefore</h1>
+
+    <Form
+      action="/precognition/default"
+      method="post"
+      #default="{ errors, invalid, validate, validating }"
+      :validation-timeout="100"
+    >
+      <div>
+        <label for="name">Name:</label>
+        <input
+          id="name"
+          name="name"
+          @change="
+            validate('name', {
+              onBeforeValidation: handleBeforeValidation,
+            })
+          "
+        />
+        <p v-if="invalid('name')" class="error">{{ errors.name }}</p>
+      </div>
+
+      <div>
+        <label for="email">Email:</label>
+        <input id="email" name="email" @change="validate('email')" />
+        <p v-if="invalid('email')" class="error">{{ errors.email }}</p>
+      </div>
+
+      <p v-if="validating" class="validating">Validating...</p>
+
+      <button type="submit">Submit</button>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/Callbacks.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/Callbacks.vue
new file mode 100644
index 000000000..43870df42
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/Callbacks.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const successCalled = ref(false)
+const errorCalled = ref(false)
+const finishCalled = ref(false)
+</script>
+
+<template>
+  <div>
+    <h1>Form Precognition Callbacks</h1>
+
+    <h2>Callbacks Test</h2>
+    <Form action="/precognition/default" method="post" :validationTimeout="100">
+      <template #default="{ validate, validating, touch }">
+        <div>
+          <input name="name" placeholder="Name" @blur="() => touch('name')" />
+        </div>
+
+        <p v-if="validating">Validating...</p>
+        <p v-if="successCalled">onPrecognitionSuccess called!</p>
+        <p v-if="errorCalled">onValidationError called!</p>
+        <p v-if="finishCalled">onFinish called!</p>
+
+        <button
+          type="button"
+          @click="
+            () => {
+              successCalled = false
+              errorCalled = false
+              finishCalled = false
+              validate({
+                onPrecognitionSuccess: () => {
+                  successCalled = true
+                },
+                onValidationError: () => {
+                  errorCalled = true
+                },
+                onFinish: () => {
+                  finishCalled = true
+                },
+              })
+            }
+          "
+        >
+          Validate
+        </button>
+      </template>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/Cancel.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/Cancel.vue
new file mode 100644
index 000000000..966625cb4
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/Cancel.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <h1>Precognition - Cancel Tests</h1>
+
+    <h2>Auto Cancel Test</h2>
+    <Form
+      action="/precognition/default?slow=1"
+      method="post"
+      :validation-timeout="100"
+      #default="{ invalid, errors, validate, validating }"
+    >
+      <div>
+        <input id="auto-cancel-name-input" name="name" placeholder="Name" @blur="validate('name')" />
+        <p v-if="invalid('name')" class="error">
+          {{ errors.name }}
+        </p>
+      </div>
+
+      <p v-if="validating" class="validating">Validating...</p>
+
+      <button type="submit">Submit</button>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/Default.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/Default.vue
new file mode 100644
index 000000000..16cc4fe3d
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/Default.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <h1>Form Precognition</h1>
+
+    <Form
+      action="/precognition/default"
+      method="post"
+      :validation-timeout="100"
+      #default="{ invalid, errors, validate, valid, validating }"
+    >
+      <div>
+        <input name="name" placeholder="Name" @blur="validate('name')" />
+        <p v-if="invalid('name')">
+          {{ errors.name }}
+        </p>
+        <p v-if="valid('name')">Name is valid!</p>
+      </div>
+
+      <div>
+        <input name="email" placeholder="Email" @blur="validate('email')" />
+        <p v-if="invalid('email')">
+          {{ errors.email }}
+        </p>
+        <p v-if="valid('email')">Email is valid!</p>
+      </div>
+
+      <p v-if="validating">Validating...</p>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/Files.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/Files.vue
new file mode 100644
index 000000000..901e127cf
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/Files.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const validateFilesEnabled = ref(false)
+</script>
+
+<template>
+  <div>
+    <h1>Form Precognition Files</h1>
+
+    <Form
+      action="/precognition/files"
+      method="post"
+      :validation-timeout="100"
+      :validate-files="validateFilesEnabled"
+      #default="{ invalid, errors, validate, valid, validating }"
+    >
+      <div>
+        <input name="name" placeholder="Name" @blur="validate('name')" />
+        <p v-if="invalid('name')">
+          {{ errors.name }}
+        </p>
+        <p v-if="valid('name')">Name is valid!</p>
+      </div>
+
+      <div>
+        <input type="file" name="avatar" id="avatar" />
+        <p v-if="invalid('avatar')">
+          {{ errors.avatar }}
+        </p>
+        <p v-if="valid('avatar')">Avatar is valid!</p>
+      </div>
+
+      <p v-if="validating">Validating...</p>
+
+      <button type="button" @click="validateFilesEnabled = !validateFilesEnabled">
+        Toggle Validate Files ({{ validateFilesEnabled ? 'enabled' : 'disabled' }})
+      </button>
+
+      <button type="button" @click="validate({ only: ['name', 'avatar'] })">Validate Both</button>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/Headers.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/Headers.vue
new file mode 100644
index 000000000..40a6ddf91
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/Headers.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <h1>Precognition - Custom Headers</h1>
+
+    <Form
+      action="/precognition/headers"
+      method="post"
+      :headers="{ 'X-Custom-Header': 'custom-value' }"
+      :validation-timeout="100"
+      #default="{ invalid, errors, validate, validating }"
+    >
+      <div>
+        <input name="name" placeholder="Name" @blur="validate('name')" />
+        <p v-if="invalid('name')">
+          {{ errors.name }}
+        </p>
+      </div>
+
+      <p v-if="validating">Validating...</p>
+
+      <button type="submit">Submit</button>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/Methods.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/Methods.vue
new file mode 100644
index 000000000..60656c5a5
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/Methods.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <h1>Form Precognition - Touch, Reset & Validate</h1>
+
+    <Form
+      action="/precognition/default"
+      method="post"
+      :validation-timeout="100"
+      #default="{ invalid, errors, validate, touch, touched, validating, reset }"
+    >
+      <div>
+        <input name="name" placeholder="Name" @blur="touch('name')" />
+        <p v-if="invalid('name')">
+          {{ errors.name }}
+        </p>
+      </div>
+
+      <div>
+        <input name="email" placeholder="Email" @blur="touch('email')" />
+        <p v-if="invalid('email')">
+          {{ errors.email }}
+        </p>
+      </div>
+
+      <p v-if="validating">Validating...</p>
+
+      <p id="name-touched">{{ touched('name') ? 'Name is touched' : 'Name is not touched' }}</p>
+      <p id="email-touched">{{ touched('email') ? 'Email is touched' : 'Email is not touched' }}</p>
+      <p id="any-touched">{{ touched() ? 'Form has touched fields' : 'Form has no touched fields' }}</p>
+
+      <button type="button" @click="validate()">Validate All Touched</button>
+      <button type="button" @click="validate('name')">Validate Name</button>
+      <button type="button" @click="validate({ only: ['name', 'email'] })">Validate Name and Email</button>
+      <button type="button" @click="touch('name', 'email')">Touch Name and Email</button>
+      <button
+        type="button"
+        @click="
+          () => {
+            touch('name')
+            touch('name')
+          }
+        "
+      >
+        Touch Name Twice
+      </button>
+      <button type="button" @click="reset()">Reset All</button>
+      <button type="button" @click="reset('name')">Reset Name</button>
+      <button type="button" @click="reset('name', 'email')">Reset Name and Email</button>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/Transform.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/Transform.vue
new file mode 100644
index 000000000..654101b74
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/Transform.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <h1>Form Precognition Transform</h1>
+
+    <Form
+      action="/precognition/default"
+      method="post"
+      :validationTimeout="100"
+      :transform="(data) => ({ name: String(data.name || '').repeat(2) })"
+    >
+      <template #default="{ invalid, errors, validate, valid, validating }">
+        <div>
+          <input name="name" placeholder="Name" @blur="() => validate('name')" />
+          <p v-if="invalid('name')">{{ errors.name }}</p>
+          <p v-if="valid('name')">Name is valid!</p>
+        </div>
+
+        <p v-if="validating">Validating...</p>
+      </template>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/WithAllErrors.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/WithAllErrors.vue
new file mode 100644
index 000000000..6933888bf
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/WithAllErrors.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <h1>Form Precognition - All Errors</h1>
+
+    <Form
+      action="/precognition/with-all-errors"
+      method="post"
+      :validation-timeout="100"
+      with-all-errors
+      #default="{ invalid, errors, validate, valid, validating }"
+    >
+      <div>
+        <input name="name" placeholder="Name" @blur="validate('name')" />
+        <div v-if="invalid('name')">
+          <template v-if="Array.isArray(errors.name)">
+            <p v-for="(error, index) in errors.name" :key="index" :id="`name-error-${index}`">
+              {{ error }}
+            </p>
+          </template>
+          <p v-else id="name-error-0">{{ errors.name }}</p>
+        </div>
+        <p v-if="valid('name')">Name is valid!</p>
+      </div>
+
+      <div>
+        <input name="email" placeholder="Email" @blur="validate('email')" />
+        <div v-if="invalid('email')">
+          <template v-if="Array.isArray(errors.email)">
+            <p v-for="(error, index) in errors.email" :key="index" :id="`email-error-${index}`">
+              {{ error }}
+            </p>
+          </template>
+          <p v-else id="email-error-0">{{ errors.email }}</p>
+        </div>
+        <p v-if="valid('email')">Email is valid!</p>
+      </div>
+
+      <p v-if="validating">Validating...</p>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.vue b/packages/vue3/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.vue
new file mode 100644
index 000000000..4de969e49
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <h1>Form Precognition - Array Errors</h1>
+
+    <Form
+      action="/precognition/with-all-errors"
+      method="post"
+      :validation-timeout="100"
+      #default="{ invalid, errors, validate, valid, validating }"
+    >
+      <div>
+        <input name="name" placeholder="Name" @blur="validate('name')" />
+        <p v-if="invalid('name')">
+          {{ errors.name }}
+        </p>
+        <p v-if="valid('name')">Name is valid!</p>
+      </div>
+
+      <div>
+        <input name="email" placeholder="Email" @blur="validate('email')" />
+        <p v-if="invalid('email')">
+          {{ errors.email }}
+        </p>
+        <p v-if="valid('email')">Email is valid!</p>
+      </div>
+
+      <p v-if="validating">Validating...</p>
+    </Form>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Ref.vue b/packages/vue3/test-app/Pages/FormComponent/Ref.vue
index 8fbdbb469..0e8848d6e 100644
--- a/packages/vue3/test-app/Pages/FormComponent/Ref.vue
+++ b/packages/vue3/test-app/Pages/FormComponent/Ref.vue
@@ -28,6 +28,14 @@ const setTestError = () => {
 const setCurrentAsDefaults = () => {
   formRef.value?.defaults()
 }
+
+const callPrecognitionMethods = () => {
+  const validator = formRef.value?.validator()
+
+  if (validator && !formRef.value?.touched('company') && !formRef.value?.valid('company')) {
+    formRef.value?.validate({ only: ['company'] })
+  }
+}
 </script>
 
 <template>
@@ -60,6 +68,7 @@ const setCurrentAsDefaults = () => {
       <button @click="clearAllErrors">Clear Errors</button>
       <button @click="setTestError">Set Test Error</button>
       <button @click="setCurrentAsDefaults">Set Current as Defaults</button>
+      <button @click="callPrecognitionMethods">Call Precognition Methods</button>
     </div>
   </div>
 </template>
diff --git a/playgrounds/react/app/Http/Requests/PrecognitionFormRequest.php b/playgrounds/react/app/Http/Requests/PrecognitionFormRequest.php
new file mode 100644
index 000000000..3fc8a6916
--- /dev/null
+++ b/playgrounds/react/app/Http/Requests/PrecognitionFormRequest.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class PrecognitionFormRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        sleep(1);
+
+        return [
+            'name' => ['required', 'string', 'min:3', 'max:255'],
+            'email' => ['required', 'email', 'max:255'],
+            'avatar' => ['nullable', 'file', 'image'],
+        ];
+    }
+}
diff --git a/playgrounds/react/resources/js/Components/Layout.tsx b/playgrounds/react/resources/js/Components/Layout.tsx
index cfc75a5cc..d14c87599 100644
--- a/playgrounds/react/resources/js/Components/Layout.tsx
+++ b/playgrounds/react/resources/js/Components/Layout.tsx
@@ -17,10 +17,13 @@ export default function Layout({ children, padding = true }: { children: React.R
           Article
         </Link>
         <Link href="/form" className="hover:underline" prefetch={['mount', 'click']} stale-after="1m">
-          Form
+          useForm
         </Link>
         <Link href="/form-component" className="hover:underline">
-          Form Comp
+          {'<Form>'}
+        </Link>
+        <Link href="/form-component/precognition" className="hover:underline">
+          Precognition
         </Link>
         <Link href="/async" className="hover:underline">
           Async
diff --git a/playgrounds/react/resources/js/Pages/FormComponentPrecognition.tsx b/playgrounds/react/resources/js/Pages/FormComponentPrecognition.tsx
new file mode 100644
index 000000000..5863ceb9b
--- /dev/null
+++ b/playgrounds/react/resources/js/Pages/FormComponentPrecognition.tsx
@@ -0,0 +1,271 @@
+import { FormComponentMethods } from '@inertiajs/core'
+import { Form, Head } from '@inertiajs/react'
+import { useState } from 'react'
+import Layout from '../Components/Layout'
+
+const FormComponentPrecognition = () => {
+  const [callbacks, setCallbacks] = useState({
+    success: false,
+    error: false,
+    finish: false,
+  })
+
+  const validateWithCallbacks = (validate: FormComponentMethods['validate']) => {
+    setCallbacks({
+      success: false,
+      error: false,
+      finish: false,
+    })
+
+    validate({
+      onPrecognitionSuccess: () => setCallbacks((prev) => ({ ...prev, success: true })),
+      onValidationError: () => setCallbacks((prev) => ({ ...prev, error: true })),
+      onFinish: () => setCallbacks((prev) => ({ ...prev, finish: true })),
+      onBeforeValidation: (newReq, oldReq) => {
+        // Prevent validation if name is 'block'
+        if (newReq.data?.name === 'block') {
+          alert('Validation blocked by onBefore!')
+          return false
+        }
+      },
+    })
+  }
+
+  const [validateFiles, setValidateFiles] = useState(false)
+  const [validationTimeout, setValidateTimeout] = useState(1500)
+
+  return (
+    <>
+      <Head title="Precognition" />
+      <h1 className="text-3xl">Form Precognition</h1>
+
+      {/* Live Validation & File Uploads */}
+      <div className="mt-6 max-w-2xl space-y-6">
+        <div className="rounded border border-gray-200 bg-gray-50 p-4">
+          <h3 className="mb-3 text-lg font-medium">Live Validation & File Uploads</h3>
+
+          {/* Configuration Toggle */}
+          <div className="mb-3 flex items-center gap-4">
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={validateFiles}
+                onChange={(e) => setValidateFiles(e.target.checked)}
+                className="rounded"
+              />
+              <span className="text-sm">Enable file validation</span>
+            </label>
+            <div className="flex items-center gap-2">
+              <label className="text-sm">Timeout:</label>
+              <select
+                value={validationTimeout}
+                onChange={(e) => setValidateTimeout(Number(e.target.value))}
+                className="rounded border px-2 py-1 text-sm"
+              >
+                <option value={500}>500ms</option>
+                <option value={1000}>1000ms</option>
+                <option value={1500}>1500ms</option>
+                <option value={2000}>2000ms</option>
+              </select>
+            </div>
+          </div>
+
+          <Form
+            action="/precognition/default"
+            method="post"
+            validateFiles={validateFiles}
+            validationTimeout={validationTimeout}
+            className="space-y-4"
+          >
+            {({ errors, invalid, valid, validate, validating }) => (
+              <>
+                <p className="text-sm text-blue-600">Validating: {validating ? ' Yes...' : ' No'}</p>
+
+                <div>
+                  <label htmlFor="name" className="block font-medium">
+                    Name
+                  </label>
+                  <input
+                    id="name"
+                    name="name"
+                    placeholder="Enter your name (min 3 chars)"
+                    onBlur={() => validate('name')}
+                    className={`mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm ${
+                      invalid('name') ? 'border-red-500' : valid('name') ? 'border-green-500' : ''
+                    }`}
+                  />
+                  {invalid('name') && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
+                  {valid('name') && <p className="mt-1 text-sm text-green-600">Valid!</p>}
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="block font-medium">
+                    Email
+                  </label>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    placeholder="Enter your email"
+                    onBlur={() => validate('email')}
+                    className={`mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm ${
+                      invalid('email') ? 'border-red-500' : valid('email') ? 'border-green-500' : ''
+                    }`}
+                  />
+                  {invalid('email') && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
+                  {valid('email') && <p className="mt-1 text-sm text-green-600">Valid!</p>}
+                </div>
+
+                <div>
+                  <label htmlFor="avatar" className="block font-medium">
+                    Avatar
+                  </label>
+                  <input
+                    id="avatar"
+                    name="avatar"
+                    type="file"
+                    onChange={() => validate('avatar')}
+                    className={`mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm ${
+                      invalid('avatar') ? 'border-red-500' : valid('avatar') ? 'border-green-500' : ''
+                    }`}
+                  />
+                  {invalid('avatar') && <p className="mt-1 text-sm text-red-600">{errors.avatar}</p>}
+                  {valid('avatar') && <p className="mt-1 text-sm text-green-600">Valid!</p>}
+                  <p className="mt-1 text-xs text-gray-500">
+                    Files are validated during precognitive requests when validateFiles is enabled
+                  </p>
+                </div>
+              </>
+            )}
+          </Form>
+        </div>
+
+        {/* Touch & Reset Methods */}
+        <div className="rounded border border-gray-200 bg-gray-50 p-4">
+          <h3 className="mb-3 text-lg font-medium">Touch & Reset Methods</h3>
+
+          <Form action="/precognition/default" method="post" className="space-y-4">
+            {({ errors, invalid, validate, touch, touched, reset, validating }) => (
+              <>
+                <div>
+                  <label htmlFor="name2" className="block font-medium">
+                    Name
+                  </label>
+                  <input
+                    id="name2"
+                    name="name"
+                    placeholder="Name"
+                    onBlur={() => touch('name')}
+                    className="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+                  />
+                  {invalid('name') && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
+                  <p className="mt-1 text-xs text-gray-500">Touched: {String(touched('name'))}</p>
+                </div>
+
+                <div>
+                  <label htmlFor="email2" className="block font-medium">
+                    Email
+                  </label>
+                  <input
+                    id="email2"
+                    name="email"
+                    type="email"
+                    placeholder="Email"
+                    onBlur={() => touch('email')}
+                    className="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+                  />
+                  {invalid('email') && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
+                  <p className="mt-1 text-xs text-gray-500">Touched: {String(touched('email'))}</p>
+                </div>
+
+                {validating && <p className="text-sm text-blue-600">Validating...</p>}
+
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    onClick={() => validate()}
+                    className="rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
+                  >
+                    Validate
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => reset()}
+                    className="rounded bg-gray-600 px-3 py-1.5 text-sm text-white"
+                  >
+                    Reset All
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => reset('name')}
+                    className="rounded bg-gray-600 px-3 py-1.5 text-sm text-white"
+                  >
+                    Reset Name
+                  </button>
+                </div>
+
+                <div className="rounded bg-gray-100 p-3 text-sm">
+                  <strong>Status:</strong>
+                  <ul className="mt-2 space-y-1 text-xs">
+                    <li>Any field touched: {String(touched())}</li>
+                    <li>Name touched: {String(touched('name'))}</li>
+                    <li>Email touched: {String(touched('email'))}</li>
+                  </ul>
+                </div>
+              </>
+            )}
+          </Form>
+        </div>
+
+        {/* Validation Callbacks */}
+        <div className="rounded border border-gray-200 bg-gray-50 p-4">
+          <h3 className="mb-3 text-lg font-medium">Validation Callbacks</h3>
+
+          <Form action="/precognition/default" method="post" className="space-y-4">
+            {({ errors, invalid, validate, touch, validating }) => (
+              <>
+                <div>
+                  <label htmlFor="name3" className="block font-medium">
+                    Name
+                  </label>
+                  <input
+                    id="name3"
+                    name="name"
+                    placeholder="Enter 'block' to prevent validation"
+                    onBlur={() => touch('name')}
+                    className="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+                  />
+                  {invalid('name') && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
+                </div>
+
+                {validating && <p className="text-sm text-blue-600">Validating...</p>}
+
+                {(callbacks.success || callbacks.error || callbacks.finish) && (
+                  <div className="rounded bg-gray-100 p-3">
+                    {callbacks.success && <p className="text-sm text-green-600">onPrecognitionSuccess called!</p>}
+                    {callbacks.error && <p className="text-sm text-red-600">onValidationError called!</p>}
+                    {callbacks.finish && <p className="text-sm text-blue-600">onFinish called!</p>}
+                  </div>
+                )}
+
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    onClick={() => validateWithCallbacks(validate)}
+                    className="rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
+                  >
+                    Validate
+                  </button>
+                </div>
+              </>
+            )}
+          </Form>
+        </div>
+      </div>
+    </>
+  )
+}
+
+FormComponentPrecognition.layout = (page) => <Layout children={page} />
+
+export default FormComponentPrecognition
diff --git a/playgrounds/react/routes/web.php b/playgrounds/react/routes/web.php
index f35381cf0..49c191ad4 100644
--- a/playgrounds/react/routes/web.php
+++ b/playgrounds/react/routes/web.php
@@ -1,6 +1,9 @@
 <?php
 
+use App\Http\Requests\PrecognitionFormRequest;
 use App\Models\ChatMessage;
+use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
+use Illuminate\Foundation\Precognition;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Facades\Cache;
@@ -109,6 +112,18 @@
     return back();
 });
 
+Route::get('/form-component/precognition', function () {
+    return inertia('FormComponentPrecognition');
+});
+
+Route::post('/form-component/precognition', function (PrecognitionFormRequest $request) {
+    $data = $request->validated();
+
+    // dd($data);
+
+    return back();
+})->middleware([HandlePrecognitiveRequests::class]);
+
 Route::post('/user', function () {
     return inertia('User', [
         'user' => request()->validate([
diff --git a/playgrounds/svelte4/app/Http/Requests/PrecognitionFormRequest.php b/playgrounds/svelte4/app/Http/Requests/PrecognitionFormRequest.php
new file mode 100644
index 000000000..3fc8a6916
--- /dev/null
+++ b/playgrounds/svelte4/app/Http/Requests/PrecognitionFormRequest.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class PrecognitionFormRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        sleep(1);
+
+        return [
+            'name' => ['required', 'string', 'min:3', 'max:255'],
+            'email' => ['required', 'email', 'max:255'],
+            'avatar' => ['nullable', 'file', 'image'],
+        ];
+    }
+}
diff --git a/playgrounds/svelte4/resources/js/Components/Layout.svelte b/playgrounds/svelte4/resources/js/Components/Layout.svelte
index 7bf6fec58..a930284aa 100644
--- a/playgrounds/svelte4/resources/js/Components/Layout.svelte
+++ b/playgrounds/svelte4/resources/js/Components/Layout.svelte
@@ -12,8 +12,9 @@
   <a href="/" use:inertia={{ prefetch: true }} class="hover:underline">Home</a>
   <a href="/users" use:inertia={{ prefetch: true, cacheFor: ['2s', '1m'] }} class="hover:underline">Users</a>
   <a href="/article" use:inertia={{ prefetch: 'click' }} class="hover:underline">Article</a>
-  <a href="/form" use:inertia={{ prefetch: ['mount', 'click'] }} class="hover:underline">Form</a>
-  <a href="/form-component" use:inertia class="hover:underline">Form Comp</a>
+  <a href="/form" use:inertia={{ prefetch: ['mount', 'click'] }} class="hover:underline">useForm</a>
+  <a href="/form-component" use:inertia class="hover:underline">{'<Form>'}</a>
+  <a href="/form-component/precognition" use:inertia class="hover:underline">Precognition</a>
   <button use:inertia={{ method: 'post', href: '/logout' }} type="button" class="hover:underline">Logout</button>
   <a href="/goodbye" use:inertia class="hover:underline">External</a>
   <a href="/async" use:inertia class="hover:underline">Async</a>
diff --git a/playgrounds/svelte4/resources/js/Pages/FormComponentPrecognition.svelte b/playgrounds/svelte4/resources/js/Pages/FormComponentPrecognition.svelte
new file mode 100644
index 000000000..66bc13795
--- /dev/null
+++ b/playgrounds/svelte4/resources/js/Pages/FormComponentPrecognition.svelte
@@ -0,0 +1,279 @@
+<script context="module">
+  export { default as layout } from '../Components/Layout.svelte'
+</script>
+
+<script lang="ts">
+  import type { FormComponentMethods } from '@inertiajs/core'
+
+  import { Form } from '@inertiajs/svelte'
+
+  export let appName
+
+  let callbacks = {
+    success: false,
+    error: false,
+    finish: false,
+  }
+
+  const validateWithCallbacks = (validate: FormComponentMethods['validate']) => {
+    callbacks = {
+      success: false,
+      error: false,
+      finish: false,
+    }
+
+    validate({
+      onPrecognitionSuccess: () => (callbacks.success = true),
+      onValidationError: () => (callbacks.error = true),
+      onFinish: () => (callbacks.finish = true),
+      onBeforeValidation: (newReq, oldReq) => {
+        // Prevent validation if name is 'block'
+        if (newReq.data?.name === 'block') {
+          alert('Validation blocked by onBefore!')
+          return false
+        }
+      },
+    })
+  }
+
+  let validateFiles = false
+  let validationTimeout = 1500
+</script>
+
+<svelte:head>
+  <title>Precognition - {appName}</title>
+</svelte:head>
+
+<h1 class="text-3xl">Form Precognition</h1>
+
+<!-- Live Validation & File Uploads -->
+<div class="mt-6 max-w-2xl space-y-6">
+  <div class="rounded border border-gray-200 bg-gray-50 p-4">
+    <h3 class="mb-3 text-lg font-medium">Live Validation & File Uploads</h3>
+
+    <!-- Configuration Toggle -->
+    <div class="mb-3 flex items-center gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" bind:checked={validateFiles} class="rounded" />
+        <span class="text-sm">Enable file validation</span>
+      </label>
+      <div class="flex items-center gap-2">
+        <label class="text-sm">Timeout:</label>
+        <select bind:value={validationTimeout} class="rounded border px-2 py-1 text-sm">
+          <option value={500}>500ms</option>
+          <option value={1000}>1000ms</option>
+          <option value={1500}>1500ms</option>
+          <option value={2000}>2000ms</option>
+        </select>
+      </div>
+    </div>
+
+    <Form
+      action="/precognition/default"
+      method="post"
+      {validateFiles}
+      {validationTimeout}
+      class="space-y-4"
+      let:errors
+      let:invalid
+      let:valid
+      let:validate
+      let:validating
+    >
+      <p class="text-sm text-blue-600">Validating: {validating ? 'Yes...' : 'No'}</p>
+
+      <div>
+        <label for="name" class="block font-medium">Name</label>
+        <input
+          id="name"
+          name="name"
+          placeholder="Enter your name (min 3 chars)"
+          on:blur={() => validate('name')}
+          class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+          class:border-red-500={invalid('name')}
+          class:border-green-500={valid('name')}
+        />
+        {#if invalid('name')}
+          <p class="mt-1 text-sm text-red-600">{errors.name}</p>
+        {/if}
+        {#if valid('name')}
+          <p class="mt-1 text-sm text-green-600">Valid!</p>
+        {/if}
+      </div>
+
+      <div>
+        <label for="email" class="block font-medium">Email</label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          placeholder="Enter your email"
+          on:blur={() => validate('email')}
+          class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+          class:border-red-500={invalid('email')}
+          class:border-green-500={valid('email')}
+        />
+        {#if invalid('email')}
+          <p class="mt-1 text-sm text-red-600">{errors.email}</p>
+        {/if}
+        {#if valid('email')}
+          <p class="mt-1 text-sm text-green-600">Valid!</p>
+        {/if}
+      </div>
+
+      <div>
+        <label for="avatar" class="block font-medium">Avatar</label>
+        <input
+          id="avatar"
+          name="avatar"
+          type="file"
+          on:change={() => validate('avatar')}
+          class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+          class:border-red-500={invalid('avatar')}
+          class:border-green-500={valid('avatar')}
+        />
+        {#if invalid('avatar')}
+          <p class="mt-1 text-sm text-red-600">{errors.avatar}</p>
+        {/if}
+        {#if valid('avatar')}
+          <p class="mt-1 text-sm text-green-600">Valid!</p>
+        {/if}
+        <p class="mt-1 text-xs text-gray-500">
+          Files are validated during precognitive requests when validateFiles is enabled
+        </p>
+      </div>
+    </Form>
+  </div>
+
+  <!-- Touch & Reset Methods -->
+  <div class="rounded border border-gray-200 bg-gray-50 p-4">
+    <h3 class="mb-3 text-lg font-medium">Touch & Reset Methods</h3>
+
+    <Form
+      action="/precognition/default"
+      method="post"
+      class="space-y-4"
+      let:errors
+      let:invalid
+      let:validate
+      let:touch
+      let:touched
+      let:reset
+      let:validating
+    >
+      <div>
+        <label for="name2" class="block font-medium">Name</label>
+        <input
+          id="name2"
+          name="name"
+          placeholder="Name"
+          on:blur={() => touch('name')}
+          class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+        />
+        {#if invalid('name')}
+          <p class="mt-1 text-sm text-red-600">{errors.name}</p>
+        {/if}
+        <p class="mt-1 text-xs text-gray-500">Touched: {touched('name')}</p>
+      </div>
+
+      <div>
+        <label for="email2" class="block font-medium">Email</label>
+        <input
+          id="email2"
+          name="email"
+          type="email"
+          placeholder="Email"
+          on:blur={() => touch('email')}
+          class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+        />
+        {#if invalid('email')}
+          <p class="mt-1 text-sm text-red-600">{errors.email}</p>
+        {/if}
+        <p class="mt-1 text-xs text-gray-500">Touched: {touched('email')}</p>
+      </div>
+
+      {#if validating}
+        <p class="text-sm text-blue-600">Validating...</p>
+      {/if}
+
+      <div class="flex flex-wrap gap-2">
+        <button type="button" on:click={() => validate()} class="rounded bg-blue-600 px-3 py-1.5 text-sm text-white">
+          Validate
+        </button>
+        <button type="button" on:click={() => reset()} class="rounded bg-gray-600 px-3 py-1.5 text-sm text-white">
+          Reset All
+        </button>
+        <button type="button" on:click={() => reset('name')} class="rounded bg-gray-600 px-3 py-1.5 text-sm text-white">
+          Reset Name
+        </button>
+      </div>
+
+      <div class="rounded bg-gray-100 p-3 text-sm">
+        <strong>Status:</strong>
+        <ul class="mt-2 space-y-1 text-xs">
+          <li>Any field touched: {touched()}</li>
+          <li>Name touched: {touched('name')}</li>
+          <li>Email touched: {touched('email')}</li>
+        </ul>
+      </div>
+    </Form>
+  </div>
+
+  <!-- Validation Callbacks -->
+  <div class="rounded border border-gray-200 bg-gray-50 p-4">
+    <h3 class="mb-3 text-lg font-medium">Validation Callbacks</h3>
+
+    <Form
+      action="/precognition/default"
+      method="post"
+      class="space-y-4"
+      let:errors
+      let:invalid
+      let:validate
+      let:touch
+      let:validating
+    >
+      <div>
+        <label for="name3" class="block font-medium">Name</label>
+        <input
+          id="name3"
+          name="name"
+          placeholder="Enter 'block' to prevent validation"
+          on:blur={() => touch('name')}
+          class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+        />
+        {#if invalid('name')}
+          <p class="mt-1 text-sm text-red-600">{errors.name}</p>
+        {/if}
+      </div>
+
+      {#if validating}
+        <p class="text-sm text-blue-600">Validating...</p>
+      {/if}
+
+      {#if callbacks.success || callbacks.error || callbacks.finish}
+        <div class="rounded bg-gray-100 p-3">
+          {#if callbacks.success}
+            <p class="text-sm text-green-600">onPrecognitionSuccess called!</p>
+          {/if}
+          {#if callbacks.error}
+            <p class="text-sm text-red-600">onValidationError called!</p>
+          {/if}
+          {#if callbacks.finish}
+            <p class="text-sm text-blue-600">onFinish called!</p>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="flex flex-wrap gap-2">
+        <button
+          type="button"
+          on:click={() => validateWithCallbacks(validate)}
+          class="rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
+        >
+          Validate
+        </button>
+      </div>
+    </Form>
+  </div>
+</div>
diff --git a/playgrounds/svelte4/routes/web.php b/playgrounds/svelte4/routes/web.php
index 83db38bdf..2310dcfb6 100644
--- a/playgrounds/svelte4/routes/web.php
+++ b/playgrounds/svelte4/routes/web.php
@@ -1,5 +1,7 @@
 <?php
 
+use App\Http\Requests\PrecognitionFormRequest;
+use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Facades\Cache;
@@ -397,6 +399,18 @@ function () use ($start, $end, $itemType) {
     return back();
 });
 
+Route::get('/form-component/precognition', function () {
+    return inertia('FormComponentPrecognition');
+});
+
+Route::post('/form-component/precognition', function (PrecognitionFormRequest $request) {
+    $data = $request->validated();
+
+    // dd($data);
+
+    return back();
+})->middleware([HandlePrecognitiveRequests::class]);
+
 Route::get('/photo-grid/{horizontal?}', function ($horizontal = null) {
     if (request()->header('X-Inertia-Partial-Component')) {
         // Simulate latency for partial reloads
diff --git a/playgrounds/svelte5/app/Http/Requests/PrecognitionFormRequest.php b/playgrounds/svelte5/app/Http/Requests/PrecognitionFormRequest.php
new file mode 100644
index 000000000..3fc8a6916
--- /dev/null
+++ b/playgrounds/svelte5/app/Http/Requests/PrecognitionFormRequest.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class PrecognitionFormRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        sleep(1);
+
+        return [
+            'name' => ['required', 'string', 'min:3', 'max:255'],
+            'email' => ['required', 'email', 'max:255'],
+            'avatar' => ['nullable', 'file', 'image'],
+        ];
+    }
+}
diff --git a/playgrounds/svelte5/resources/js/Components/Layout.svelte b/playgrounds/svelte5/resources/js/Components/Layout.svelte
index 66f136f3d..3b919a0ee 100644
--- a/playgrounds/svelte5/resources/js/Components/Layout.svelte
+++ b/playgrounds/svelte5/resources/js/Components/Layout.svelte
@@ -9,8 +9,9 @@
   <a href="/" use:inertia class="hover:underline">Home</a>
   <a href="/users" use:inertia class="hover:underline">Users</a>
   <a href="/article" use:inertia class="hover:underline">Article</a>
-  <a href="/form" use:inertia class="hover:underline">Form</a>
-  <a href="/form-component" use:inertia class="hover:underline">Form Comp</a>
+  <a href="/form" use:inertia class="hover:underline">useForm</a>
+  <a href="/form-component" use:inertia class="hover:underline">{'<Form>'}</a>
+  <a href="/form-component/precognition" use:inertia class="hover:underline">Precognition</a>
   <a href="/photo-grid" use:inertia class="hover:underline">Photo Grid</a>
   <a href="/photo-grid/horizontal" use:inertia class="hover:underline">Photo Row</a>
   <a href="/data-table" use:inertia class="hover:underline">Table</a>
diff --git a/playgrounds/svelte5/resources/js/Pages/FormComponentPrecognition.svelte b/playgrounds/svelte5/resources/js/Pages/FormComponentPrecognition.svelte
new file mode 100644
index 000000000..295172320
--- /dev/null
+++ b/playgrounds/svelte5/resources/js/Pages/FormComponentPrecognition.svelte
@@ -0,0 +1,258 @@
+<script module>
+  export { default as layout } from '../Components/Layout.svelte'
+</script>
+
+<script lang="ts">
+  import type { FormComponentMethods } from '@inertiajs/core'
+
+  import { Form } from '@inertiajs/svelte'
+
+  let { appName } = $props()
+
+  let callbacks = $state({
+    success: false,
+    error: false,
+    finish: false,
+  })
+
+  const validateWithCallbacks = (validate: FormComponentMethods['validate']) => {
+    callbacks = {
+      success: false,
+      error: false,
+      finish: false,
+    }
+
+    validate({
+      onPrecognitionSuccess: () => (callbacks.success = true),
+      onValidationError: () => (callbacks.error = true),
+      onFinish: () => (callbacks.finish = true),
+      onBeforeValidation: (newReq, oldReq) => {
+        // Prevent validation if name is 'block'
+        if (newReq.data?.name === 'block') {
+          alert('Validation blocked by onBefore!')
+          return false
+        }
+      },
+    })
+  }
+
+  let validateFiles = $state(false)
+  let validationTimeout = $state(1500)
+</script>
+
+<svelte:head>
+  <title>Precognition - {appName}</title>
+</svelte:head>
+
+<h1 class="text-3xl">Form Precognition</h1>
+
+<!-- Live Validation & File Uploads -->
+<div class="mt-6 max-w-2xl space-y-6">
+  <div class="rounded border border-gray-200 bg-gray-50 p-4">
+    <h3 class="mb-3 text-lg font-medium">Live Validation & File Uploads</h3>
+
+    <!-- Configuration Toggle -->
+    <div class="mb-3 flex items-center gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" bind:checked={validateFiles} class="rounded" />
+        <span class="text-sm">Enable file validation</span>
+      </label>
+      <div class="flex items-center gap-2">
+        <label class="text-sm">Timeout:</label>
+        <select bind:value={validationTimeout} class="rounded border px-2 py-1 text-sm">
+          <option value={500}>500ms</option>
+          <option value={1000}>1000ms</option>
+          <option value={1500}>1500ms</option>
+          <option value={2000}>2000ms</option>
+        </select>
+      </div>
+    </div>
+
+    <Form action="/precognition/default" method="post" {validateFiles} {validationTimeout} class="space-y-4">
+      {#snippet children({ errors, invalid, valid, validate, validating })}
+        <p class="text-sm text-blue-600">Validating: {validating ? 'Yes...' : 'No'}</p>
+
+        <div>
+          <label for="name" class="block font-medium">Name</label>
+          <input
+            id="name"
+            name="name"
+            placeholder="Enter your name (min 3 chars)"
+            onblur={() => validate('name')}
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+            class:border-red-500={invalid('name')}
+            class:border-green-500={valid('name')}
+          />
+          {#if invalid('name')}
+            <p class="mt-1 text-sm text-red-600">{errors.name}</p>
+          {/if}
+          {#if valid('name')}
+            <p class="mt-1 text-sm text-green-600">Valid!</p>
+          {/if}
+        </div>
+
+        <div>
+          <label for="email" class="block font-medium">Email</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="Enter your email"
+            onblur={() => validate('email')}
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+            class:border-red-500={invalid('email')}
+            class:border-green-500={valid('email')}
+          />
+          {#if invalid('email')}
+            <p class="mt-1 text-sm text-red-600">{errors.email}</p>
+          {/if}
+          {#if valid('email')}
+            <p class="mt-1 text-sm text-green-600">Valid!</p>
+          {/if}
+        </div>
+
+        <div>
+          <label for="avatar" class="block font-medium">Avatar</label>
+          <input
+            id="avatar"
+            name="avatar"
+            type="file"
+            onchange={() => validate('avatar')}
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+            class:border-red-500={invalid('avatar')}
+            class:border-green-500={valid('avatar')}
+          />
+          {#if invalid('avatar')}
+            <p class="mt-1 text-sm text-red-600">{errors.avatar}</p>
+          {/if}
+          {#if valid('avatar')}
+            <p class="mt-1 text-sm text-green-600">Valid!</p>
+          {/if}
+          <p class="mt-1 text-xs text-gray-500">
+            Files are validated during precognitive requests when validateFiles is enabled
+          </p>
+        </div>
+      {/snippet}
+    </Form>
+  </div>
+
+  <!-- Touch & Reset Methods -->
+  <div class="rounded border border-gray-200 bg-gray-50 p-4">
+    <h3 class="mb-3 text-lg font-medium">Touch & Reset Methods</h3>
+
+    <Form action="/precognition/default" method="post" class="space-y-4">
+      {#snippet children({ errors, invalid, validate, touch, touched, reset, validating })}
+        <div>
+          <label for="name2" class="block font-medium">Name</label>
+          <input
+            id="name2"
+            name="name"
+            placeholder="Name"
+            onblur={() => touch('name')}
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+          />
+          {#if invalid('name')}
+            <p class="mt-1 text-sm text-red-600">{errors.name}</p>
+          {/if}
+          <p class="mt-1 text-xs text-gray-500">Touched: {touched('name')}</p>
+        </div>
+
+        <div>
+          <label for="email2" class="block font-medium">Email</label>
+          <input
+            id="email2"
+            name="email"
+            type="email"
+            placeholder="Email"
+            onblur={() => touch('email')}
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+          />
+          {#if invalid('email')}
+            <p class="mt-1 text-sm text-red-600">{errors.email}</p>
+          {/if}
+          <p class="mt-1 text-xs text-gray-500">Touched: {touched('email')}</p>
+        </div>
+
+        {#if validating}
+          <p class="text-sm text-blue-600">Validating...</p>
+        {/if}
+
+        <div class="flex flex-wrap gap-2">
+          <button type="button" onclick={() => validate()} class="rounded bg-blue-600 px-3 py-1.5 text-sm text-white">
+            Validate
+          </button>
+          <button type="button" onclick={() => reset()} class="rounded bg-gray-600 px-3 py-1.5 text-sm text-white">
+            Reset All
+          </button>
+          <button
+            type="button"
+            onclick={() => reset('name')}
+            class="rounded bg-gray-600 px-3 py-1.5 text-sm text-white"
+          >
+            Reset Name
+          </button>
+        </div>
+
+        <div class="rounded bg-gray-100 p-3 text-sm">
+          <strong>Status:</strong>
+          <ul class="mt-2 space-y-1 text-xs">
+            <li>Any field touched: {touched()}</li>
+            <li>Name touched: {touched('name')}</li>
+            <li>Email touched: {touched('email')}</li>
+          </ul>
+        </div>
+      {/snippet}
+    </Form>
+  </div>
+
+  <!-- Validation Callbacks -->
+  <div class="rounded border border-gray-200 bg-gray-50 p-4">
+    <h3 class="mb-3 text-lg font-medium">Validation Callbacks</h3>
+
+    <Form action="/precognition/default" method="post" class="space-y-4">
+      {#snippet children({ errors, invalid, validate, touch, validating })}
+        <div>
+          <label for="name3" class="block font-medium">Name</label>
+          <input
+            id="name3"
+            name="name"
+            placeholder="Enter 'block' to prevent validation"
+            onblur={() => touch('name')}
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+          />
+          {#if invalid('name')}
+            <p class="mt-1 text-sm text-red-600">{errors.name}</p>
+          {/if}
+        </div>
+
+        {#if validating}
+          <p class="text-sm text-blue-600">Validating...</p>
+        {/if}
+
+        {#if callbacks.success || callbacks.error || callbacks.finish}
+          <div class="rounded bg-gray-100 p-3">
+            {#if callbacks.success}
+              <p class="text-sm text-green-600">onPrecognitionSuccess called!</p>
+            {/if}
+            {#if callbacks.error}
+              <p class="text-sm text-red-600">onValidationError called!</p>
+            {/if}
+            {#if callbacks.finish}
+              <p class="text-sm text-blue-600">onFinish called!</p>
+            {/if}
+          </div>
+        {/if}
+
+        <div class="flex flex-wrap gap-2">
+          <button
+            type="button"
+            onclick={() => validateWithCallbacks(validate)}
+            class="rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
+          >
+            Validate
+          </button>
+        </div>
+      {/snippet}
+    </Form>
+  </div>
+</div>
diff --git a/playgrounds/svelte5/routes/web.php b/playgrounds/svelte5/routes/web.php
index 0c19c9068..b5c2c88ec 100644
--- a/playgrounds/svelte5/routes/web.php
+++ b/playgrounds/svelte5/routes/web.php
@@ -1,5 +1,7 @@
 <?php
 
+use App\Http\Requests\PrecognitionFormRequest;
+use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Facades\Cache;
@@ -397,6 +399,18 @@ function () use ($start, $end, $itemType) {
     return back();
 });
 
+Route::get('/form-component/precognition', function () {
+    return inertia('FormComponentPrecognition');
+});
+
+Route::post('/form-component/precognition', function (PrecognitionFormRequest $request) {
+    $data = $request->validated();
+
+    // dd($data);
+
+    return back();
+})->middleware([HandlePrecognitiveRequests::class]);
+
 Route::get('/photo-grid/{horizontal?}', function ($horizontal = null) {
     if (request()->header('X-Inertia-Partial-Component')) {
         // Simulate latency for partial reloads
diff --git a/playgrounds/vue3/app/Http/Requests/PrecognitionFormRequest.php b/playgrounds/vue3/app/Http/Requests/PrecognitionFormRequest.php
new file mode 100644
index 000000000..3fc8a6916
--- /dev/null
+++ b/playgrounds/vue3/app/Http/Requests/PrecognitionFormRequest.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class PrecognitionFormRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        sleep(1);
+
+        return [
+            'name' => ['required', 'string', 'min:3', 'max:255'],
+            'email' => ['required', 'email', 'max:255'],
+            'avatar' => ['nullable', 'file', 'image'],
+        ];
+    }
+}
diff --git a/playgrounds/vue3/resources/js/Components/Layout.vue b/playgrounds/vue3/resources/js/Components/Layout.vue
index a9bd98049..8c08c066e 100644
--- a/playgrounds/vue3/resources/js/Components/Layout.vue
+++ b/playgrounds/vue3/resources/js/Components/Layout.vue
@@ -22,8 +22,9 @@ const appName = computed(() => page.props.appName)
     <Link href="/" class="hover:underline" prefetch>Home</Link>
     <Link href="/users" class="hover:underline" prefetch :cache-for="['2s', '1m']">Users</Link>
     <Link href="/article" class="hover:underline" prefetch="click">Article</Link>
-    <Link href="/form" class="hover:underline" :prefetch="['mount', 'click']" cache-for="1m">Form</Link>
-    <Link href="/form-component" class="hover:underline">Form Comp</Link>
+    <Link href="/form" class="hover:underline" :prefetch="['mount', 'click']" cache-for="1m">useForm</Link>
+    <Link href="/form-component" class="hover:underline">{{ '<' + 'Form' + '>' }}</Link>
+    <Link href="/form-component/precognition" class="hover:underline">Precognition</Link>
     <Link href="/logout" method="post" class="hover:underline">Logout</Link>
     <Link href="/goodbye" class="hover:underline">External</Link>
     <Link href="/async" class="hover:underline">Async</Link>
diff --git a/playgrounds/vue3/resources/js/Pages/FormComponentPrecognition.vue b/playgrounds/vue3/resources/js/Pages/FormComponentPrecognition.vue
new file mode 100644
index 000000000..4866f221b
--- /dev/null
+++ b/playgrounds/vue3/resources/js/Pages/FormComponentPrecognition.vue
@@ -0,0 +1,227 @@
+<script lang="ts">
+import Layout from '../Components/Layout.vue'
+export default { layout: Layout }
+</script>
+
+<script setup lang="ts">
+import { FormComponentMethods } from '@inertiajs/core'
+import { Form, Head } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const callbacks = ref({
+  success: false,
+  error: false,
+  finish: false,
+})
+
+const validateWithCallbacks = (validate: FormComponentMethods['validate']) => {
+  callbacks.value = {
+    success: false,
+    error: false,
+    finish: false,
+  }
+
+  validate({
+    onPrecognitionSuccess: () => (callbacks.value.success = true),
+    onValidationError: () => (callbacks.value.error = true),
+    onFinish: () => (callbacks.value.finish = true),
+    onBeforeValidation: (newReq, oldReq) => {
+      // Prevent validation if name is 'block'
+      if (newReq.data?.name === 'block') {
+        alert('Validation blocked by onBefore!')
+        return false
+      }
+    },
+  })
+}
+
+const validateFiles = ref(false)
+const validationTimeout = ref(1500)
+</script>
+
+<template>
+  <Head title="Precognition" />
+  <h1 class="text-3xl">Form Precognition</h1>
+
+  <!-- Live Validation & File Uploads -->
+  <div class="mt-6 max-w-2xl space-y-6">
+    <div class="rounded border border-gray-200 bg-gray-50 p-4">
+      <h3 class="mb-3 text-lg font-medium">Live Validation & File Uploads</h3>
+
+      <!-- Configuration Toggle -->
+      <div class="mb-3 flex items-center gap-4">
+        <label class="flex items-center gap-2">
+          <input type="checkbox" v-model="validateFiles" class="rounded" />
+          <span class="text-sm">Enable file validation</span>
+        </label>
+        <div class="flex items-center gap-2">
+          <label class="text-sm">Timeout:</label>
+          <select v-model="validationTimeout" class="rounded border px-2 py-1 text-sm">
+            <option :value="500">500ms</option>
+            <option :value="1000">1000ms</option>
+            <option :value="1500">1500ms</option>
+            <option :value="2000">2000ms</option>
+          </select>
+        </div>
+      </div>
+
+      <Form
+        action="/precognition/default"
+        method="post"
+        :validate-files="validateFiles"
+        :validation-timeout="validationTimeout"
+        #default="{ errors, invalid, valid, validate, validating }"
+        class="space-y-4"
+      >
+        <p class="text-sm text-blue-600">Validating: {{ validating ? 'Yes...' : 'No' }}</p>
+
+        <div>
+          <label for="name" class="block font-medium">Name</label>
+          <input
+            id="name"
+            name="name"
+            placeholder="Enter your name (min 3 chars)"
+            @blur="validate('name')"
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+            :class="invalid('name') ? 'border-red-500' : valid('name') ? 'border-green-500' : ''"
+          />
+          <p v-if="invalid('name')" class="mt-1 text-sm text-red-600">{{ errors.name }}</p>
+          <p v-if="valid('name')" class="mt-1 text-sm text-green-600">Valid!</p>
+        </div>
+
+        <div>
+          <label for="email" class="block font-medium">Email</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="Enter your email"
+            @blur="validate('email')"
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+            :class="invalid('email') ? 'border-red-500' : valid('email') ? 'border-green-500' : ''"
+          />
+          <p v-if="invalid('email')" class="mt-1 text-sm text-red-600">{{ errors.email }}</p>
+          <p v-if="valid('email')" class="mt-1 text-sm text-green-600">Valid!</p>
+        </div>
+
+        <div>
+          <label for="avatar" class="block font-medium">Avatar</label>
+          <input
+            id="avatar"
+            name="avatar"
+            type="file"
+            @change="validate('avatar')"
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+            :class="invalid('avatar') ? 'border-red-500' : valid('avatar') ? 'border-green-500' : ''"
+          />
+          <p v-if="invalid('avatar')" class="mt-1 text-sm text-red-600">{{ errors.avatar }}</p>
+          <p v-if="valid('avatar')" class="mt-1 text-sm text-green-600">Valid!</p>
+          <p class="mt-1 text-xs text-gray-500">
+            Files are validated during precognitive requests when validateFiles is enabled
+          </p>
+        </div>
+      </Form>
+    </div>
+
+    <!-- Touch & Reset Methods -->
+    <div class="rounded border border-gray-200 bg-gray-50 p-4">
+      <h3 class="mb-3 text-lg font-medium">Touch & Reset Methods</h3>
+
+      <Form
+        action="/precognition/default"
+        method="post"
+        #default="{ errors, invalid, validate, touch, touched, reset, validating }"
+        class="space-y-4"
+      >
+        <div>
+          <label for="name2" class="block font-medium">Name</label>
+          <input
+            id="name2"
+            name="name"
+            placeholder="Name"
+            @blur="touch('name')"
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+          />
+          <p v-if="invalid('name')" class="mt-1 text-sm text-red-600">{{ errors.name }}</p>
+          <p class="mt-1 text-xs text-gray-500">Touched: {{ touched('name') }}</p>
+        </div>
+
+        <div>
+          <label for="email2" class="block font-medium">Email</label>
+          <input
+            id="email2"
+            name="email"
+            type="email"
+            placeholder="Email"
+            @blur="touch('email')"
+            class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+          />
+          <p v-if="invalid('email')" class="mt-1 text-sm text-red-600">{{ errors.email }}</p>
+          <p class="mt-1 text-xs text-gray-500">Touched: {{ touched('email') }}</p>
+        </div>
+
+        <p v-if="validating" class="text-sm text-blue-600">Validating...</p>
+
+        <div class="flex flex-wrap gap-2">
+          <button type="button" @click="validate()" class="rounded bg-blue-600 px-3 py-1.5 text-sm text-white">
+            Validate
+          </button>
+          <button type="button" @click="reset()" class="rounded bg-gray-600 px-3 py-1.5 text-sm text-white">
+            Reset All
+          </button>
+          <button type="button" @click="reset('name')" class="rounded bg-gray-600 px-3 py-1.5 text-sm text-white">
+            Reset Name
+          </button>
+        </div>
+
+        <div class="rounded bg-gray-100 p-3 text-sm">
+          <strong>Status:</strong>
+          <ul class="mt-2 space-y-1 text-xs">
+            <li>Any field touched: {{ touched() }}</li>
+            <li>Name touched: {{ touched('name') }}</li>
+            <li>Email touched: {{ touched('email') }}</li>
+          </ul>
+        </div>
+      </Form>
+    </div>
+
+    <!-- Validation Callbacks -->
+    <div class="rounded border border-gray-200 bg-gray-50 p-4">
+      <h3 class="mb-3 text-lg font-medium">Validation Callbacks</h3>
+
+      <Form action="/precognition/default" method="post" class="space-y-4">
+        <template #default="{ errors, invalid, validate, touch, validating }">
+          <div>
+            <label for="name3" class="block font-medium">Name</label>
+            <input
+              id="name3"
+              name="name"
+              placeholder="Enter 'block' to prevent validation"
+              @blur="touch('name')"
+              class="mt-1 w-full appearance-none rounded border px-2 py-1 shadow-sm"
+            />
+            <p v-if="invalid('name')" class="mt-1 text-sm text-red-600">{{ errors.name }}</p>
+          </div>
+
+          <p v-if="validating" class="text-sm text-blue-600">Validating...</p>
+
+          <div v-if="callbacks.success || callbacks.error || callbacks.finish" class="rounded bg-gray-100 p-3">
+            <p v-if="callbacks.success" class="text-sm text-green-600">onPrecognitionSuccess called!</p>
+            <p v-if="callbacks.error" class="text-sm text-red-600">onValidationError called!</p>
+            <p v-if="callbacks.finish" class="text-sm text-blue-600">onFinish called!</p>
+          </div>
+
+          <div class="flex flex-wrap gap-2">
+            <button
+              type="button"
+              @click="validateWithCallbacks(validate)"
+              class="rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
+            >
+              Validate
+            </button>
+          </div>
+        </template>
+      </Form>
+    </div>
+  </div>
+</template>
diff --git a/playgrounds/vue3/routes/web.php b/playgrounds/vue3/routes/web.php
index 5c750bf54..a9e60ee90 100644
--- a/playgrounds/vue3/routes/web.php
+++ b/playgrounds/vue3/routes/web.php
@@ -1,6 +1,8 @@
 <?php
 
+use App\Http\Requests\PrecognitionFormRequest;
 use App\Models\ChatMessage;
+use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Facades\Cache;
@@ -164,6 +166,18 @@
     return back();
 });
 
+Route::get('/form-component/precognition', function () {
+    return inertia('FormComponentPrecognition');
+});
+
+Route::post('/form-component/precognition', function (PrecognitionFormRequest $request) {
+    $data = $request->validated();
+
+    // dd($data);
+
+    return back();
+})->middleware([HandlePrecognitiveRequests::class]);
+
 Route::post('/user', function () {
     return inertia('User', [
         'user' => request()->validate([
diff --git a/tests/form-component.spec.ts b/tests/form-component.spec.ts
index 9da05eae9..5933873d3 100644
--- a/tests/form-component.spec.ts
+++ b/tests/form-component.spec.ts
@@ -954,6 +954,22 @@ test.describe('Form Component', () => {
       expect(await page.inputValue('input[name="name"]')).toBe('New Name')
       expect(await page.inputValue('input[name="email"]')).toBe('new@example.com')
     })
+
+    test('the precognition methods are available via ref', async ({ page }) => {
+      await page.goto('/form-component/ref')
+      requests.listen(page)
+
+      await page.click('button:has-text("Call Precognition Methods")')
+
+      await page.waitForTimeout(500) // Wait for request to be made
+
+      await expect(requests.requests).toHaveLength(1)
+
+      const request = requests.requests[0]
+
+      expect(request.method()).toBe('POST')
+      expect(request.headers()['precognition']).toBe('true')
+    })
   })
 
   test.describe('Uppercase Methods', () => {
diff --git a/tests/precognition.spec.ts b/tests/precognition.spec.ts
index 618721115..90ccce900 100644
--- a/tests/precognition.spec.ts
+++ b/tests/precognition.spec.ts
@@ -1,7 +1,7 @@
 import test, { expect } from '@playwright/test'
 import { requests, shouldBeDumpPage } from './support'
 
-const integrations = ['form-helper']
+const integrations = ['form-component', 'form-helper']
 
 integrations.forEach((integration) => {
   test.describe('Precognition', () => {
@@ -170,7 +170,7 @@ integrations.forEach((integration) => {
       await expect(page.getByText('The name contains invalid characters.')).not.toBeVisible()
     })
 
-    test(prefix + 'shows all errors when simpleValidationErrors is false', async ({ page }) => {
+    test(prefix + 'shows all errors using array errors', async ({ page }) => {
       await page.goto('/' + integration + '/precognition/with-all-errors')
 
       await page.fill('input[name="name"]', 'ab')
diff --git a/tests/support.ts b/tests/support.ts
index baba83c2b..a3d2e0009 100644
--- a/tests/support.ts
+++ b/tests/support.ts
@@ -1,4 +1,4 @@
-import { expect, Page, Request } from '@playwright/test'
+import { expect, Page, Request, Response } from '@playwright/test'
 
 export const clickAndWaitForResponse = async (
   page: Page,