diff --git a/packages/react/src/Form.ts b/packages/react/src/Form.ts
index abcadcffa..28bcd78a9 100644
--- a/packages/react/src/Form.ts
+++ b/packages/react/src/Form.ts
@@ -14,10 +14,12 @@ import {
 import { NamedInputEvent, ValidationConfig } from 'laravel-precognition'
 import { isEqual } from 'lodash-es'
 import React, {
+  createContext,
   createElement,
   FormEvent,
   forwardRef,
   ReactNode,
+  useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -41,6 +43,8 @@ type FormSubmitOptions = Omit<VisitOptions, 'data' | 'onPrefetched' | 'onPrefetc
 
 const noop = () => undefined
 
+export const FormContext = createContext<FormComponentRef | undefined>(undefined)
+
 const Form = forwardRef<FormComponentRef, ComponentProps>(
   (
     {
@@ -225,7 +229,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
       setIsDirty(false)
     }
 
-    const exposed = () => ({
+    const exposed = {
       errors: form.errors,
       hasErrors: form.hasErrors,
       processing: form.processing,
@@ -251,11 +255,11 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
         form.validate(...UseFormUtils.mergeHeadersForValidation(field, config, headers)),
       touch: form.touch,
       touched: form.touched,
-    })
+    }
 
-    useImperativeHandle(ref, exposed, [form, isDirty, submit])
+    useImperativeHandle(ref, () => exposed, [form, isDirty, submit])
 
-    return createElement(
+    const formNode = createElement(
       'form',
       {
         ...props,
@@ -272,11 +276,17 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
         // See: https://github.com/inertiajs/inertia/pull/2536
         inert: disableWhileProcessing && form.processing && 'true',
       },
-      typeof children === 'function' ? children(exposed()) : children,
+      typeof children === 'function' ? children(exposed) : children,
     )
+
+    return createElement(FormContext.Provider, { value: exposed }, formNode)
   },
 )
 
 Form.displayName = 'InertiaForm'
 
+export function useFormContext(): FormComponentRef | undefined {
+  return useContext(FormContext)
+}
+
 export default Form
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 442e6ece1..a04c78dbc 100755
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -6,7 +6,7 @@ export const router = Router
 export { default as App } from './App'
 export { default as createInertiaApp } from './createInertiaApp'
 export { default as Deferred } from './Deferred'
-export { default as Form } from './Form'
+export { default as Form, useFormContext } from './Form'
 export { default as Head } from './Head'
 export { default as InfiniteScroll } from './InfiniteScroll'
 export { InertiaLinkProps, default as Link } from './Link'
diff --git a/packages/react/test-app/Pages/FormComponent/Context/ChildComponent.tsx b/packages/react/test-app/Pages/FormComponent/Context/ChildComponent.tsx
new file mode 100644
index 000000000..3c3ef5f6b
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Context/ChildComponent.tsx
@@ -0,0 +1,42 @@
+import { useFormContext } from '@inertiajs/react'
+
+export default ({ formId }: { formId?: string }) => {
+  const form = useFormContext()
+
+  return (
+    <>
+      {form ? (
+        <div>
+          <span>Child: Form is {form.isDirty ? 'dirty' : 'clean'}</span>
+          {form.hasErrors && <span> | Child: Form has errors</span>}
+          {form.errors.name && <span> | Error: {form.errors.name}</span>}
+        </div>
+      ) : (
+        <div>No form context available</div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => form?.setError('name', formId ? 'Error from child' : 'Error set from child component')}
+      >
+        Set Error
+      </button>
+      <button type="button" onClick={() => form?.clearErrors('name')}>
+        Clear Error
+      </button>
+      {!formId && (
+        <>
+          <button type="button" onClick={() => form?.submit()}>
+            Submit from Child
+          </button>
+          <button type="button" onClick={() => form?.reset()}>
+            Reset from Child
+          </button>
+          <button type="button" onClick={() => form?.defaults()}>
+            Set Defaults
+          </button>
+        </>
+      )}
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.tsx b/packages/react/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.tsx
new file mode 100644
index 000000000..e2309b0dc
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.tsx
@@ -0,0 +1,13 @@
+import { useFormContext } from '@inertiajs/react'
+
+export default () => {
+  const form = useFormContext()
+
+  return form ? (
+    <div>
+      <span>Deeply Nested: Form is {form.isDirty ? 'dirty' : 'clean'}</span>
+    </div>
+  ) : (
+    <div>No context</div>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Context/Default.tsx b/packages/react/test-app/Pages/FormComponent/Context/Default.tsx
new file mode 100644
index 000000000..606ab7573
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Context/Default.tsx
@@ -0,0 +1,28 @@
+import { Form } from '@inertiajs/react'
+import ChildComponent from './ChildComponent'
+import NestedComponent from './NestedComponent'
+import OutsideFormComponent from './OutsideFormComponent'
+
+export default () => (
+  <>
+    <Form action="/dump/post" method="post">
+      {({ isDirty, hasErrors, errors }) => (
+        <>
+          <div>
+            <span>Parent: Form is {isDirty ? 'dirty' : 'clean'}</span>
+            {hasErrors && <span> | Parent: Form has errors</span>}
+            {errors.name && <span> | {errors.name}</span>}
+          </div>
+
+          <input type="text" name="name" defaultValue="John Doe" />
+          <input type="email" name="email" defaultValue="john@example.com" />
+
+          <ChildComponent />
+          <NestedComponent />
+        </>
+      )}
+    </Form>
+
+    <OutsideFormComponent />
+  </>
+)
diff --git a/packages/react/test-app/Pages/FormComponent/Context/Methods.tsx b/packages/react/test-app/Pages/FormComponent/Context/Methods.tsx
new file mode 100644
index 000000000..e4fe5b8a6
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Context/Methods.tsx
@@ -0,0 +1,22 @@
+import { Form } from '@inertiajs/react'
+import MethodsTestComponent from './MethodsTestComponent'
+
+export default () => (
+  <Form action="/dump/post" method="post">
+    {({ isDirty, hasErrors, errors }) => (
+      <>
+        <div>
+          <span>{String(isDirty)}</span>
+          <span>{String(hasErrors)}</span>
+          {hasErrors && <pre>{JSON.stringify(errors, null, 2)}</pre>}
+        </div>
+
+        <input type="text" name="name" defaultValue="Initial Name" />
+        <input type="email" name="email" defaultValue="initial@example.com" />
+        <textarea name="bio" defaultValue="Initial bio" />
+
+        <MethodsTestComponent />
+      </>
+    )}
+  </Form>
+)
diff --git a/packages/react/test-app/Pages/FormComponent/Context/MethodsTestComponent.tsx b/packages/react/test-app/Pages/FormComponent/Context/MethodsTestComponent.tsx
new file mode 100644
index 000000000..b83569977
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Context/MethodsTestComponent.tsx
@@ -0,0 +1,103 @@
+import { useFormContext } from '@inertiajs/react'
+import { useState } from 'react'
+
+export default () => {
+  const form = useFormContext()
+  const [getDataResult, setGetDataResult] = useState('')
+  const [getFormDataResult, setGetFormDataResult] = useState('')
+
+  const testGetData = () => {
+    if (form) {
+      setGetDataResult(JSON.stringify(form.getData(), null, 2))
+    }
+  }
+
+  const testGetFormData = () => {
+    if (form) {
+      const formData = form.getFormData()
+      const obj: Record<string, FormDataEntryValue> = {}
+      formData.forEach((value, key) => {
+        obj[key] = value
+      })
+      setGetFormDataResult(JSON.stringify(obj, null, 2))
+    }
+  }
+
+  if (!form) {
+    return <div>No form context available</div>
+  }
+
+  return (
+    <>
+      <span>{String(form.isDirty)}</span>
+      <span>{String(form.hasErrors)}</span>
+      <span>{String(form.processing)}</span>
+      <span>{String(form.wasSuccessful)}</span>
+      <span>{String(form.recentlySuccessful)}</span>
+      {form.hasErrors && <pre>{JSON.stringify(form.errors, null, 2)}</pre>}
+
+      <button type="button" onClick={() => form.submit()}>
+        submit()
+      </button>
+      <button type="button" onClick={() => form.reset()}>
+        reset()
+      </button>
+      <button type="button" onClick={() => form.reset('name')}>
+        reset('name')
+      </button>
+      <button type="button" onClick={() => form.reset('name', 'email')}>
+        reset('name', 'email')
+      </button>
+
+      <button type="button" onClick={() => form.clearErrors()}>
+        clearErrors()
+      </button>
+      <button type="button" onClick={() => form.clearErrors('name')}>
+        clearErrors('name')
+      </button>
+      <button type="button" onClick={() => form.setError('name', 'Name is invalid')}>
+        setError('name')
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          form.setError({
+            name: 'Name error from child',
+            email: 'Email error from child',
+            bio: 'Bio error from child',
+          })
+        }
+      >
+        setError({'{...}'})
+      </button>
+
+      <button type="button" onClick={() => form.resetAndClearErrors()}>
+        resetAndClearErrors()
+      </button>
+      <button type="button" onClick={() => form.resetAndClearErrors('name')}>
+        resetAndClearErrors('name')
+      </button>
+      <button type="button" onClick={() => form.defaults()}>
+        defaults()
+      </button>
+
+      <button type="button" onClick={testGetData}>
+        getData()
+      </button>
+      <button type="button" onClick={testGetFormData}>
+        getFormData()
+      </button>
+
+      {getDataResult && (
+        <div>
+          <pre>{getDataResult}</pre>
+        </div>
+      )}
+      {getFormDataResult && (
+        <div>
+          <pre>{getFormDataResult}</pre>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/FormComponent/Context/Multiple.tsx b/packages/react/test-app/Pages/FormComponent/Context/Multiple.tsx
new file mode 100644
index 000000000..8abef4d45
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Context/Multiple.tsx
@@ -0,0 +1,32 @@
+import { Form } from '@inertiajs/react'
+import ChildComponent from './ChildComponent'
+
+export default () => (
+  <>
+    <Form action="/dump/post" method="post">
+      {({ isDirty, errors }) => (
+        <>
+          <div>
+            <span>Form 1 Parent: {isDirty ? 'dirty' : 'clean'}</span>
+            {errors.name && <span> | Error: {errors.name}</span>}
+          </div>
+          <input type="text" name="name" defaultValue="Form 1 Name" />
+          <ChildComponent formId="form1" />
+        </>
+      )}
+    </Form>
+
+    <Form action="/dump/post" method="post">
+      {({ isDirty, errors }) => (
+        <>
+          <div>
+            <span>Form 2 Parent: {isDirty ? 'dirty' : 'clean'}</span>
+            {errors.name && <span> | Error: {errors.name}</span>}
+          </div>
+          <input type="text" name="name" defaultValue="Form 2 Name" />
+          <ChildComponent formId="form2" />
+        </>
+      )}
+    </Form>
+  </>
+)
diff --git a/packages/react/test-app/Pages/FormComponent/Context/NestedComponent.tsx b/packages/react/test-app/Pages/FormComponent/Context/NestedComponent.tsx
new file mode 100644
index 000000000..9c7a10777
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Context/NestedComponent.tsx
@@ -0,0 +1,3 @@
+import DeeplyNestedComponent from './DeeplyNestedComponent'
+
+export default () => <DeeplyNestedComponent />
diff --git a/packages/react/test-app/Pages/FormComponent/Context/OutsideFormComponent.tsx b/packages/react/test-app/Pages/FormComponent/Context/OutsideFormComponent.tsx
new file mode 100644
index 000000000..08dd04df4
--- /dev/null
+++ b/packages/react/test-app/Pages/FormComponent/Context/OutsideFormComponent.tsx
@@ -0,0 +1,11 @@
+import { useFormContext } from '@inertiajs/react'
+
+export default () => {
+  const form = useFormContext()
+
+  return form === undefined ? (
+    <div>Correctly returns undefined when used outside a Form component</div>
+  ) : (
+    <div>Unexpectedly has form context</div>
+  )
+}
diff --git a/packages/svelte/src/components/Form.svelte b/packages/svelte/src/components/Form.svelte
index ae82bacc4..1ed00e3e9 100644
--- a/packages/svelte/src/components/Form.svelte
+++ b/packages/svelte/src/components/Form.svelte
@@ -5,6 +5,7 @@
     mergeDataIntoQueryString,
     type Errors,
     type FormComponentProps,
+    type FormComponentRef,
     type Method,
     type FormDataConvertible,
     type VisitOptions,
@@ -13,7 +14,9 @@
   } from '@inertiajs/core'
   import { type NamedInputEvent, type ValidationConfig, type Validator } from 'laravel-precognition'
   import { isEqual } from 'lodash-es'
-  import { onMount } from 'svelte'
+  import { onMount, setContext } from 'svelte'
+  import { writable } from 'svelte/store'
+  import { FormContextKey } from './formContext'
   import useForm from '../useForm'
 
   const noop = () => undefined
@@ -238,6 +241,37 @@
   }
 
   $: slotErrors = $form.errors as Errors
+
+  // Form context for child components
+  const formContextStore = writable<FormComponentRef | undefined>(undefined)
+
+  $: formContextStore.set({
+    errors: $form.errors,
+    hasErrors: $form.hasErrors,
+    processing: $form.processing,
+    progress: $form.progress,
+    wasSuccessful: $form.wasSuccessful,
+    recentlySuccessful: $form.recentlySuccessful,
+    isDirty,
+    clearErrors,
+    resetAndClearErrors,
+    setError,
+    reset,
+    submit,
+    defaults,
+    getData,
+    getFormData,
+    // Precognition
+    validator,
+    validate,
+    touch,
+    validating: $form.validating,
+    valid,
+    invalid,
+    touched,
+  })
+
+  setContext(FormContextKey, formContextStore)
 </script>
 
 <form
diff --git a/packages/svelte/src/components/formContext.ts b/packages/svelte/src/components/formContext.ts
new file mode 100644
index 000000000..df97c6add
--- /dev/null
+++ b/packages/svelte/src/components/formContext.ts
@@ -0,0 +1,9 @@
+import type { FormComponentRef } from '@inertiajs/core'
+import { getContext } from 'svelte'
+import type { Readable } from 'svelte/store'
+
+export const FormContextKey = Symbol('InertiaFormContext')
+
+export function useFormContext(): Readable<FormComponentRef> | undefined {
+  return getContext(FormContextKey)
+}
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index c2b29edfa..083bd36f7 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -5,6 +5,7 @@ export { progress, router } from '@inertiajs/core'
 export { default as App } from './components/App.svelte'
 export { default as Deferred } from './components/Deferred.svelte'
 export { default as Form } from './components/Form.svelte'
+export { useFormContext } from './components/formContext'
 export { default as InfiniteScroll } from './components/InfiniteScroll.svelte'
 export { default as Link } from './components/Link.svelte'
 export { default as WhenVisible } from './components/WhenVisible.svelte'
diff --git a/packages/svelte/test-app/Pages/FormComponent/Context/ChildComponent.svelte b/packages/svelte/test-app/Pages/FormComponent/Context/ChildComponent.svelte
new file mode 100644
index 000000000..d3c3bcc5f
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Context/ChildComponent.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { useFormContext } from '@inertiajs/svelte'
+
+  export let formId: string | undefined = undefined
+
+  const form = useFormContext()
+</script>
+
+{#if $form}
+  <div>
+    <span>Child: Form is {$form.isDirty ? 'dirty' : 'clean'}</span>
+    {#if $form.hasErrors}<span> | Child: Form has errors</span>{/if}
+    {#if $form.errors.name}<span> | Error: {$form.errors.name}</span>{/if}
+  </div>
+{:else}
+  <div>No form context available</div>
+{/if}
+
+<button
+  type="button"
+  on:click={() => $form?.setError('name', formId ? 'Error from child' : 'Error set from child component')}
+>
+  Set Error
+</button>
+<button type="button" on:click={() => $form?.clearErrors('name')}>Clear Error</button>
+{#if !formId}
+  <button type="button" on:click={() => $form?.submit()}>Submit from Child</button>
+  <button type="button" on:click={() => $form?.reset()}>Reset from Child</button>
+  <button type="button" on:click={() => $form?.defaults()}>Set Defaults</button>
+{/if}
diff --git a/packages/svelte/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.svelte b/packages/svelte/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.svelte
new file mode 100644
index 000000000..b8607124a
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { useFormContext } from '@inertiajs/svelte'
+
+  const form = useFormContext()
+</script>
+
+{#if $form}
+  <div>
+    <span>Deeply Nested: Form is {$form.isDirty ? 'dirty' : 'clean'}</span>
+  </div>
+{:else}
+  <div>No context</div>
+{/if}
diff --git a/packages/svelte/test-app/Pages/FormComponent/Context/Default.svelte b/packages/svelte/test-app/Pages/FormComponent/Context/Default.svelte
new file mode 100644
index 000000000..e87a8ca37
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Context/Default.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+  import ChildComponent from './ChildComponent.svelte'
+  import NestedComponent from './NestedComponent.svelte'
+  import OutsideFormComponent from './OutsideFormComponent.svelte'
+</script>
+
+<Form action="/dump/post" method="post" let:isDirty let:hasErrors let:errors>
+  <div>
+    <span>Parent: Form is {isDirty ? 'dirty' : 'clean'}</span>
+    {#if hasErrors}<span> | Parent: Form has errors</span>{/if}
+    {#if errors.name}<span> | {errors.name}</span>{/if}
+  </div>
+
+  <input type="text" name="name" value="John Doe" />
+  <input type="email" name="email" value="john@example.com" />
+
+  <ChildComponent />
+  <NestedComponent />
+</Form>
+
+<OutsideFormComponent />
diff --git a/packages/svelte/test-app/Pages/FormComponent/Context/Methods.svelte b/packages/svelte/test-app/Pages/FormComponent/Context/Methods.svelte
new file mode 100644
index 000000000..a0696a438
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Context/Methods.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+  import MethodsTestComponent from './MethodsTestComponent.svelte'
+</script>
+
+<Form action="/dump/post" method="post" let:isDirty let:hasErrors let:errors>
+  <div>
+    <span>{isDirty}</span>
+    <span>{hasErrors}</span>
+    {#if hasErrors}<pre>{JSON.stringify(errors, null, 2)}</pre>{/if}
+  </div>
+
+  <input type="text" name="name" value="Initial Name" />
+  <input type="email" name="email" value="initial@example.com" />
+  <textarea name="bio">Initial bio</textarea>
+
+  <MethodsTestComponent />
+</Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Context/MethodsTestComponent.svelte b/packages/svelte/test-app/Pages/FormComponent/Context/MethodsTestComponent.svelte
new file mode 100644
index 000000000..06503d538
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Context/MethodsTestComponent.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { useFormContext } from '@inertiajs/svelte'
+
+  const form = useFormContext()
+
+  let getDataResult = ''
+  let getFormDataResult = ''
+
+  function testGetData() {
+    if ($form) {
+      getDataResult = JSON.stringify($form.getData(), null, 2)
+    }
+  }
+
+  function testGetFormData() {
+    if ($form) {
+      const formData = $form.getFormData()
+      const obj: Record<string, FormDataEntryValue> = {}
+      formData.forEach((value, key) => {
+        obj[key] = value
+      })
+      getFormDataResult = JSON.stringify(obj, null, 2)
+    }
+  }
+</script>
+
+{#if $form}
+  <span>{$form.isDirty}</span>
+  <span>{$form.hasErrors}</span>
+  <span>{$form.processing}</span>
+  <span>{$form.wasSuccessful}</span>
+  <span>{$form.recentlySuccessful}</span>
+  {#if $form.hasErrors}<pre>{JSON.stringify($form.errors, null, 2)}</pre>{/if}
+
+  <button type="button" on:click={() => $form.submit()}>submit()</button>
+  <button type="button" on:click={() => $form.reset()}>reset()</button>
+  <button type="button" on:click={() => $form.reset('name')}>reset('name')</button>
+  <button type="button" on:click={() => $form.reset('name', 'email')}>reset('name', 'email')</button>
+
+  <button type="button" on:click={() => $form.clearErrors()}>clearErrors()</button>
+  <button type="button" on:click={() => $form.clearErrors('name')}>clearErrors('name')</button>
+  <button type="button" on:click={() => $form.setError('name', 'Name is invalid')}>setError('name')</button>
+  <button
+    type="button"
+    on:click={() =>
+      $form.setError({ name: 'Name error from child', email: 'Email error from child', bio: 'Bio error from child' })}
+    >setError({'{...}'})</button
+  >
+
+  <button type="button" on:click={() => $form.resetAndClearErrors()}>resetAndClearErrors()</button>
+  <button type="button" on:click={() => $form.resetAndClearErrors('name')}>resetAndClearErrors('name')</button>
+  <button type="button" on:click={() => $form.defaults()}>defaults()</button>
+
+  <button type="button" on:click={testGetData}>getData()</button>
+  <button type="button" on:click={testGetFormData}>getFormData()</button>
+
+  {#if getDataResult}
+    <div><pre>{getDataResult}</pre></div>
+  {/if}
+  {#if getFormDataResult}
+    <div><pre>{getFormDataResult}</pre></div>
+  {/if}
+{:else}
+  <div>No form context available</div>
+{/if}
diff --git a/packages/svelte/test-app/Pages/FormComponent/Context/Multiple.svelte b/packages/svelte/test-app/Pages/FormComponent/Context/Multiple.svelte
new file mode 100644
index 000000000..90b877fff
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Context/Multiple.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Form } from '@inertiajs/svelte'
+  import ChildComponent from './ChildComponent.svelte'
+</script>
+
+<Form action="/dump/post" method="post" let:isDirty let:errors>
+  <div>
+    <span>Form 1 Parent: {isDirty ? 'dirty' : 'clean'}</span>
+    {#if errors.name}<span> | Error: {errors.name}</span>{/if}
+  </div>
+  <input type="text" name="name" value="Form 1 Name" />
+  <ChildComponent formId="form1" />
+</Form>
+
+<Form action="/dump/post" method="post" let:isDirty let:errors>
+  <div>
+    <span>Form 2 Parent: {isDirty ? 'dirty' : 'clean'}</span>
+    {#if errors.name}<span> | Error: {errors.name}</span>{/if}
+  </div>
+  <input type="text" name="name" value="Form 2 Name" />
+  <ChildComponent formId="form2" />
+</Form>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Context/NestedComponent.svelte b/packages/svelte/test-app/Pages/FormComponent/Context/NestedComponent.svelte
new file mode 100644
index 000000000..74f6f02fd
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Context/NestedComponent.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  import DeeplyNestedComponent from './DeeplyNestedComponent.svelte'
+</script>
+
+<DeeplyNestedComponent />
diff --git a/packages/svelte/test-app/Pages/FormComponent/Context/OutsideFormComponent.svelte b/packages/svelte/test-app/Pages/FormComponent/Context/OutsideFormComponent.svelte
new file mode 100644
index 000000000..1c38b5da4
--- /dev/null
+++ b/packages/svelte/test-app/Pages/FormComponent/Context/OutsideFormComponent.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { useFormContext } from '@inertiajs/svelte'
+
+  const form = useFormContext()
+</script>
+
+{#if $form === undefined}
+  <div>Correctly returns undefined when used outside a Form component</div>
+{:else}
+  <div>Unexpectedly has form context</div>
+{/if}
diff --git a/packages/vue3/src/form.ts b/packages/vue3/src/form.ts
index 72a309892..ab109ee7d 100644
--- a/packages/vue3/src/form.ts
+++ b/packages/vue3/src/form.ts
@@ -14,13 +14,28 @@ import {
 } from '@inertiajs/core'
 import { NamedInputEvent, ValidationConfig } from 'laravel-precognition'
 import { isEqual } from 'lodash-es'
-import { computed, defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, SlotsType, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  InjectionKey,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  provide,
+  ref,
+  SlotsType,
+  watch,
+} from 'vue'
 import useForm from './useForm'
 
 type FormSubmitOptions = Omit<VisitOptions, 'data' | 'onPrefetched' | 'onPrefetching'>
 
 const noop = () => undefined
 
+export const FormContextKey: InjectionKey<FormComponentRef> = Symbol('InertiaFormContext')
+
 const Form = defineComponent({
   name: 'Form',
   slots: Object as SlotsType<{
@@ -320,6 +335,8 @@ const Form = defineComponent({
 
     expose<FormComponentRef>(exposed)
 
+    provide(FormContextKey, exposed)
+
     return () => {
       return h(
         'form',
@@ -340,4 +357,8 @@ const Form = defineComponent({
   },
 })
 
+export function useFormContext(): FormComponentRef | undefined {
+  return inject(FormContextKey)
+}
+
 export default Form
diff --git a/packages/vue3/src/index.ts b/packages/vue3/src/index.ts
index ad239eabc..875db6a1f 100755
--- a/packages/vue3/src/index.ts
+++ b/packages/vue3/src/index.ts
@@ -5,7 +5,7 @@ export { progress, router } from '@inertiajs/core'
 export { default as App, usePage } from './app'
 export { default as createInertiaApp } from './createInertiaApp'
 export { default as Deferred } from './deferred'
-export { default as Form } from './form'
+export { default as Form, useFormContext } from './form'
 export { default as Head } from './head'
 export { default as InfiniteScroll } from './infiniteScroll'
 export { InertiaLinkProps, default as Link } from './link'
diff --git a/packages/vue3/test-app/Pages/FormComponent/Context/ChildComponent.vue b/packages/vue3/test-app/Pages/FormComponent/Context/ChildComponent.vue
new file mode 100644
index 000000000..e5c64d72f
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Context/ChildComponent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useFormContext } from '@inertiajs/vue3'
+
+defineProps<{
+  formId?: string
+}>()
+
+const form = useFormContext()
+</script>
+
+<template>
+  <div v-if="form">
+    <span>Child: Form is {{ form.isDirty ? 'dirty' : 'clean' }}</span>
+    <span v-if="form.hasErrors"> | Child: Form has errors</span>
+    <span v-if="form.errors.name"> | Error: {{ form.errors.name }}</span>
+  </div>
+  <div v-else>No form context available</div>
+
+  <button type="button" @click="form?.setError('name', formId ? 'Error from child' : 'Error set from child component')">
+    Set Error
+  </button>
+  <button type="button" @click="form?.clearErrors('name')">Clear Error</button>
+  <button v-if="!formId" type="button" @click="form?.submit()">Submit from Child</button>
+  <button v-if="!formId" type="button" @click="form?.reset()">Reset from Child</button>
+  <button v-if="!formId" type="button" @click="form?.defaults()">Set Defaults</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.vue b/packages/vue3/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.vue
new file mode 100644
index 000000000..fbd1fa90a
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useFormContext } from '@inertiajs/vue3'
+
+const form = useFormContext()
+</script>
+
+<template>
+  <div v-if="form">
+    <span>Deeply Nested: Form is {{ form.isDirty ? 'dirty' : 'clean' }}</span>
+  </div>
+  <div v-else>No context</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Context/Default.vue b/packages/vue3/test-app/Pages/FormComponent/Context/Default.vue
new file mode 100644
index 000000000..2a3e53773
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Context/Default.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+import ChildComponent from './ChildComponent.vue'
+import NestedComponent from './NestedComponent.vue'
+import OutsideFormComponent from './OutsideFormComponent.vue'
+</script>
+
+<template>
+  <Form action="/dump/post" method="post" #default="{ isDirty, hasErrors, errors }">
+    <div>
+      <span>Parent: Form is {{ isDirty ? 'dirty' : 'clean' }}</span>
+      <span v-if="hasErrors"> | Parent: Form has errors</span>
+      <span v-if="errors.name"> | {{ errors.name }}</span>
+    </div>
+
+    <input type="text" name="name" value="John Doe" />
+    <input type="email" name="email" value="john@example.com" />
+
+    <ChildComponent />
+    <NestedComponent />
+  </Form>
+
+  <OutsideFormComponent />
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Context/Methods.vue b/packages/vue3/test-app/Pages/FormComponent/Context/Methods.vue
new file mode 100644
index 000000000..484c299d6
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Context/Methods.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+import MethodsTestComponent from './MethodsTestComponent.vue'
+</script>
+
+<template>
+  <Form action="/dump/post" method="post" #default="{ isDirty, hasErrors, errors }">
+    <div>
+      <span>{{ isDirty }}</span>
+      <span>{{ hasErrors }}</span>
+      <pre v-if="hasErrors">{{ JSON.stringify(errors, null, 2) }}</pre>
+    </div>
+
+    <input type="text" name="name" value="Initial Name" />
+    <input type="email" name="email" value="initial@example.com" />
+    <textarea name="bio">Initial bio</textarea>
+
+    <MethodsTestComponent />
+  </Form>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Context/MethodsTestComponent.vue b/packages/vue3/test-app/Pages/FormComponent/Context/MethodsTestComponent.vue
new file mode 100644
index 000000000..4c11bbdf9
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Context/MethodsTestComponent.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useFormContext } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const form = useFormContext()
+
+const getDataResult = ref('')
+const getFormDataResult = ref('')
+
+function testGetData() {
+  if (form) {
+    getDataResult.value = JSON.stringify(form.getData(), null, 2)
+  }
+}
+
+function testGetFormData() {
+  if (form) {
+    const formData = form.getFormData()
+    const obj: Record<string, FormDataEntryValue> = {}
+    formData.forEach((value, key) => {
+      obj[key] = value
+    })
+    getFormDataResult.value = JSON.stringify(obj, null, 2)
+  }
+}
+</script>
+
+<template>
+  <div v-if="form">
+    <span>{{ form.isDirty }}</span>
+    <span>{{ form.hasErrors }}</span>
+    <span>{{ form.processing }}</span>
+    <span>{{ form.wasSuccessful }}</span>
+    <span>{{ form.recentlySuccessful }}</span>
+    <pre v-if="form.hasErrors">{{ JSON.stringify(form.errors, null, 2) }}</pre>
+
+    <button type="button" @click="form.submit()">submit()</button>
+    <button type="button" @click="form.reset()">reset()</button>
+    <button type="button" @click="form.reset('name')">reset('name')</button>
+    <button type="button" @click="form.reset('name', 'email')">reset('name', 'email')</button>
+
+    <button type="button" @click="form.clearErrors()">clearErrors()</button>
+    <button type="button" @click="form.clearErrors('name')">clearErrors('name')</button>
+    <button type="button" @click="form.setError('name', 'Name is invalid')">setError('name')</button>
+    <button
+      type="button"
+      @click="
+        form.setError({
+          name: 'Name error from child',
+          email: 'Email error from child',
+          bio: 'Bio error from child',
+        })
+      "
+    >
+      setError({...})
+    </button>
+
+    <button type="button" @click="form.resetAndClearErrors()">resetAndClearErrors()</button>
+    <button type="button" @click="form.resetAndClearErrors('name')">resetAndClearErrors('name')</button>
+    <button type="button" @click="form.defaults()">defaults()</button>
+
+    <button type="button" @click="testGetData">getData()</button>
+    <button type="button" @click="testGetFormData">getFormData()</button>
+
+    <div v-if="getDataResult">
+      <pre>{{ getDataResult }}</pre>
+    </div>
+    <div v-if="getFormDataResult">
+      <pre>{{ getFormDataResult }}</pre>
+    </div>
+  </div>
+  <div v-else>No form context available</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Context/Multiple.vue b/packages/vue3/test-app/Pages/FormComponent/Context/Multiple.vue
new file mode 100644
index 000000000..918404a97
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Context/Multiple.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3'
+import ChildComponent from './ChildComponent.vue'
+</script>
+
+<template>
+  <Form action="/dump/post" method="post" #default="{ isDirty, errors }">
+    <div>
+      <span>Form 1 Parent: {{ isDirty ? 'dirty' : 'clean' }}</span>
+      <span v-if="errors.name"> | Error: {{ errors.name }}</span>
+    </div>
+    <input type="text" name="name" value="Form 1 Name" />
+    <ChildComponent form-id="form1" />
+  </Form>
+
+  <Form action="/dump/post" method="post" #default="{ isDirty, errors }">
+    <div>
+      <span>Form 2 Parent: {{ isDirty ? 'dirty' : 'clean' }}</span>
+      <span v-if="errors.name"> | Error: {{ errors.name }}</span>
+    </div>
+    <input type="text" name="name" value="Form 2 Name" />
+    <ChildComponent form-id="form2" />
+  </Form>
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Context/NestedComponent.vue b/packages/vue3/test-app/Pages/FormComponent/Context/NestedComponent.vue
new file mode 100644
index 000000000..815f9ba98
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Context/NestedComponent.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import DeeplyNestedComponent from './DeeplyNestedComponent.vue'
+</script>
+
+<template>
+  <DeeplyNestedComponent />
+</template>
diff --git a/packages/vue3/test-app/Pages/FormComponent/Context/OutsideFormComponent.vue b/packages/vue3/test-app/Pages/FormComponent/Context/OutsideFormComponent.vue
new file mode 100644
index 000000000..0ad2c2b08
--- /dev/null
+++ b/packages/vue3/test-app/Pages/FormComponent/Context/OutsideFormComponent.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useFormContext } from '@inertiajs/vue3'
+
+const form = useFormContext()
+</script>
+
+<template>
+  <div v-if="form === undefined">Correctly returns undefined when used outside a Form component</div>
+  <div v-else>Unexpectedly has form context</div>
+</template>
diff --git a/tests/form-component-context.spec.ts b/tests/form-component-context.spec.ts
new file mode 100644
index 000000000..c9f52dfdd
--- /dev/null
+++ b/tests/form-component-context.spec.ts
@@ -0,0 +1,333 @@
+import test, { expect } from '@playwright/test'
+import { pageLoads } from './support'
+
+test.describe('Form Component Context', () => {
+  test.describe('Basic Context', () => {
+    test.beforeEach(async ({ page }) => {
+      pageLoads.watch(page)
+      await page.goto('/form-component/context/default')
+    })
+
+    test('provides context to child components', async ({ page }) => {
+      await expect(page.getByText('Child: Form is clean')).toBeVisible()
+    })
+
+    test('provides context to deeply nested components', async ({ page }) => {
+      await expect(page.getByText('Deeply Nested: Form is clean')).toBeVisible()
+    })
+
+    test('returns undefined outside Form component', async ({ page }) => {
+      await expect(page.getByText('Correctly returns undefined when used outside a Form component')).toBeVisible()
+    })
+
+    test('syncs isDirty state between parent and child', async ({ page }) => {
+      // Initial state - clean
+      await expect(page.getByText('Parent: Form is clean')).toBeVisible()
+      await expect(page.getByText('Child: Form is clean')).toBeVisible()
+
+      // Make form dirty
+      await page.locator('input[name="name"]').fill('Jane Doe')
+
+      // Both parent and child should show dirty
+      await expect(page.getByText('Parent: Form is dirty')).toBeVisible()
+      await expect(page.getByText('Child: Form is dirty')).toBeVisible()
+    })
+
+    test('can submit form from child component using context', async ({ page }) => {
+      await page.locator('input[name="name"]').fill('Test Name')
+      await page.locator('input[name="email"]').fill('test@example.com')
+
+      // Submit from child component
+      await page.getByRole('button', { name: 'Submit from Child' }).click()
+
+      // Should navigate to dump page
+      await page.waitForURL('/dump/post')
+    })
+
+    test('can reset form from child component using context', async ({ page }) => {
+      // Change the default values
+      await page.locator('input[name="name"]').fill('Changed Name')
+      await page.locator('input[name="email"]').fill('changed@example.com')
+
+      // Verify form is dirty
+      await expect(page.getByText('Child: Form is dirty')).toBeVisible()
+
+      // Reset from child
+      await page.getByRole('button', { name: 'Reset from Child' }).click()
+
+      // Should be reset to defaults
+      await expect(page.locator('input[name="name"]')).toHaveValue('John Doe')
+      await expect(page.locator('input[name="email"]')).toHaveValue('john@example.com')
+      await expect(page.getByText('Child: Form is clean')).toBeVisible()
+    })
+
+    test('can set errors from child component using context', async ({ page }) => {
+      // Set error from child
+      await page.getByRole('button', { name: 'Set Error' }).click()
+
+      // Both parent and child should show the error
+      await expect(page.getByText('Error set from child component')).toHaveCount(2)
+      await expect(page.getByText('Parent: Form has errors')).toBeVisible()
+      await expect(page.getByText('Child: Form has errors')).toBeVisible()
+    })
+
+    test('can clear errors from child component using context', async ({ page }) => {
+      // First set an error
+      await page.getByRole('button', { name: 'Set Error' }).click()
+      await expect(page.getByText('Error set from child component').first()).toBeVisible()
+
+      // Clear errors from child
+      await page.getByRole('button', { name: 'Clear Error' }).click()
+
+      // Errors should be cleared
+      await expect(page.getByText('Error set from child component')).not.toBeVisible()
+    })
+
+    test('can set defaults from child component using context', async ({ page }) => {
+      // Change values
+      await page.locator('input[name="name"]').fill('New Default Name')
+      await page.locator('input[name="email"]').fill('newdefault@example.com')
+
+      // Form should be dirty
+      await expect(page.getByText('Child: Form is dirty')).toBeVisible()
+
+      // Set new defaults from child
+      await page.getByRole('button', { name: 'Set Defaults' }).click()
+
+      // Form should now be clean (because current values are now the defaults)
+      await expect(page.getByText('Child: Form is clean')).toBeVisible()
+
+      // Reset should now go back to the new defaults
+      await page.locator('input[name="name"]').fill('Another Name')
+      await expect(page.getByText('Child: Form is dirty')).toBeVisible()
+
+      await page.getByRole('button', { name: 'Reset from Child' }).click()
+      await expect(page.locator('input[name="name"]')).toHaveValue('New Default Name')
+      await expect(page.locator('input[name="email"]')).toHaveValue('newdefault@example.com')
+    })
+  })
+
+  test.describe('Context Methods', () => {
+    test.beforeEach(async ({ page }) => {
+      pageLoads.watch(page)
+      await page.goto('/form-component/context/methods')
+    })
+
+    test('child can access all state properties through context', async ({ page }) => {
+      // Check initial state values are all false
+      const booleanStates = page.locator('span').filter({ hasText: /^(true|false)$/ })
+      await expect(booleanStates.first()).toHaveText('false') // isDirty
+      await expect(booleanStates.nth(1)).toHaveText('false') // hasErrors
+      await expect(booleanStates.nth(2)).toHaveText('false') // processing
+      await expect(booleanStates.nth(3)).toHaveText('false') // wasSuccessful
+      await expect(booleanStates.nth(4)).toHaveText('false') // recentlySuccessful
+    })
+
+    test('can submit from child using context', async ({ page }) => {
+      await page.locator('input[name="name"]').fill('Test')
+      await page.locator('input[name="email"]').fill('test@example.com')
+
+      await page.getByRole('button', { name: 'submit()' }).click()
+
+      await page.waitForURL('/dump/post')
+    })
+
+    test('can reset all fields from child', async ({ page }) => {
+      // Change all fields
+      await page.locator('input[name="name"]').fill('Changed')
+      await page.locator('input[name="email"]').fill('changed@example.com')
+      await page.locator('textarea[name="bio"]').fill('Changed bio')
+
+      // Reset all
+      await page.getByRole('button', { name: 'reset()', exact: true }).click()
+
+      // Should be back to defaults
+      await expect(page.locator('input[name="name"]')).toHaveValue('Initial Name')
+      await expect(page.locator('input[name="email"]')).toHaveValue('initial@example.com')
+      await expect(page.locator('textarea[name="bio"]')).toHaveValue('Initial bio')
+    })
+
+    test('can reset specific field from child', async ({ page }) => {
+      // Change fields
+      await page.locator('input[name="name"]').fill('Changed Name')
+      await page.locator('input[name="email"]').fill('changed@example.com')
+
+      // Reset only name
+      await page.getByRole('button', { name: "reset('name')", exact: true }).click()
+
+      // Name should be reset, email should stay changed
+      await expect(page.locator('input[name="name"]')).toHaveValue('Initial Name')
+      await expect(page.locator('input[name="email"]')).toHaveValue('changed@example.com')
+    })
+
+    test('can reset multiple specific fields from child', async ({ page }) => {
+      // Change fields
+      await page.locator('input[name="name"]').fill('Changed Name')
+      await page.locator('input[name="email"]').fill('changed@example.com')
+      await page.locator('textarea[name="bio"]').fill('Changed bio')
+
+      // Reset name and email
+      await page.getByRole('button', { name: "reset('name', 'email')" }).click()
+
+      // Name and email should be reset, bio should stay changed
+      await expect(page.locator('input[name="name"]')).toHaveValue('Initial Name')
+      await expect(page.locator('input[name="email"]')).toHaveValue('initial@example.com')
+      await expect(page.locator('textarea[name="bio"]')).toHaveValue('Changed bio')
+    })
+
+    test('can set single error from child', async ({ page }) => {
+      await page.getByRole('button', { name: "setError('name')" }).click()
+
+      // Check error appears (shown in both parent and child, so use first())
+      await expect(page.getByText('Name is invalid').first()).toBeVisible()
+    })
+
+    test('can set multiple errors from child', async ({ page }) => {
+      await page.getByRole('button', { name: 'setError({...})' }).click()
+
+      // Check all errors appear (shown in both parent and child, so use first())
+      await expect(page.getByText('Name error from child').first()).toBeVisible()
+      await expect(page.getByText('Email error from child').first()).toBeVisible()
+      await expect(page.getByText('Bio error from child').first()).toBeVisible()
+    })
+
+    test('can clear all errors from child', async ({ page }) => {
+      // Set errors first
+      await page.getByRole('button', { name: 'setError({...})' }).click()
+      await expect(page.getByText('Name error from child').first()).toBeVisible()
+
+      // Clear all errors
+      await page.getByRole('button', { name: 'clearErrors()', exact: true }).click()
+
+      await expect(page.getByText('Name error from child')).not.toBeVisible()
+      await expect(page.getByText('Email error from child')).not.toBeVisible()
+      await expect(page.getByText('Bio error from child')).not.toBeVisible()
+    })
+
+    test('can clear specific error from child', async ({ page }) => {
+      // Set multiple errors
+      await page.getByRole('button', { name: 'setError({...})' }).click()
+
+      // Clear only name error
+      await page.getByRole('button', { name: "clearErrors('name')", exact: true }).click()
+
+      // Name error should be cleared, others should remain
+      await expect(page.getByText('Name error from child')).not.toBeVisible()
+      await expect(page.getByText('Email error from child').first()).toBeVisible()
+      await expect(page.getByText('Bio error from child').first()).toBeVisible()
+    })
+
+    test('can reset and clear errors together from child', async ({ page }) => {
+      // Change values and set errors
+      await page.locator('input[name="name"]').fill('Changed')
+      await page.getByRole('button', { name: "setError('name')" }).click()
+      await expect(page.getByText('Name is invalid').first()).toBeVisible()
+
+      // Reset and clear errors
+      await page.getByRole('button', { name: 'resetAndClearErrors()', exact: true }).click()
+
+      // Both should be cleared
+      await expect(page.getByText('Name is invalid')).not.toBeVisible()
+      await expect(page.locator('input[name="name"]')).toHaveValue('Initial Name')
+    })
+
+    test('can reset specific field and clear its error from child', async ({ page }) => {
+      // Set errors and change values
+      await page.locator('input[name="name"]').fill('Changed')
+      await page.locator('input[name="email"]').fill('changed@example.com')
+      await page.getByRole('button', { name: 'setError({...})' }).click()
+
+      // Reset and clear only name
+      await page.getByRole('button', { name: "resetAndClearErrors('name')" }).click()
+
+      // Name should be reset and its error cleared
+      await expect(page.locator('input[name="name"]')).toHaveValue('Initial Name')
+      await expect(page.getByText('Name error from child')).not.toBeVisible()
+
+      // Email should still be changed and have error
+      await expect(page.locator('input[name="email"]')).toHaveValue('changed@example.com')
+      await expect(page.getByText('Email error from child').first()).toBeVisible()
+    })
+
+    test('can set defaults from child', async ({ page }) => {
+      // Change values
+      await page.locator('input[name="name"]').fill('New Default')
+
+      // Set defaults
+      await page.getByRole('button', { name: 'defaults()' }).click()
+
+      // Should now be clean (current values are now defaults)
+      await page.locator('input[name="name"]').fill('Something else')
+      await page.getByRole('button', { name: 'reset()', exact: true }).click()
+      await expect(page.locator('input[name="name"]')).toHaveValue('New Default')
+    })
+
+    test('can get data as object from child', async ({ page }) => {
+      await page.locator('input[name="name"]').fill('Test Name')
+      await page.locator('input[name="email"]').fill('test@example.com')
+      await page.locator('textarea[name="bio"]').fill('Test bio')
+
+      await page.getByRole('button', { name: 'getData()' }).click()
+
+      // Check the result is displayed
+      await expect(page.getByText('Test Name')).toBeVisible()
+      await expect(page.getByText('test@example.com')).toBeVisible()
+      await expect(page.getByText('Test bio')).toBeVisible()
+    })
+
+    test('can get FormData from child', async ({ page }) => {
+      await page.locator('input[name="name"]').fill('Test Name')
+      await page.locator('input[name="email"]').fill('test@example.com')
+
+      await page.getByRole('button', { name: 'getFormData()' }).click()
+
+      // Check the result is displayed
+      await expect(page.getByText('Test Name')).toBeVisible()
+      await expect(page.getByText('test@example.com')).toBeVisible()
+    })
+  })
+
+  test.describe('Multiple Forms', () => {
+    test.beforeEach(async ({ page }) => {
+      pageLoads.watch(page)
+      await page.goto('/form-component/context/multiple')
+    })
+
+    test('each form provides isolated context to its children', async ({ page }) => {
+      // Both forms should start clean
+      await expect(page.getByText('Child: Form is clean').first()).toBeVisible()
+      await expect(page.getByText('Child: Form is clean').nth(1)).toBeVisible()
+
+      // Make form 1 dirty
+      await page.locator('input[name="name"]').first().fill('Changed')
+
+      // Only form 1 should be dirty
+      await expect(page.getByText('Form 1 Parent: dirty')).toBeVisible()
+      await expect(page.getByText('Child: Form is dirty')).toBeVisible()
+      await expect(page.getByText('Form 2 Parent: clean')).toBeVisible()
+      await expect(page.getByText('Child: Form is clean')).toBeVisible()
+    })
+
+    test('setting error in one form does not affect the other', async ({ page }) => {
+      // Set error in form 1 via child
+      await page.getByRole('button', { name: 'Set Error' }).first().click()
+
+      // Only form 1 should have error
+      await expect(page.getByText('Error: Error from child').first()).toBeVisible()
+      await expect(page.getByText('Error: Error from child')).toHaveCount(2) // Parent + Child of form 1
+      await expect(page.getByText('Form 2 Parent: clean')).toBeVisible()
+
+      // Set error in form 2 via child
+      await page.getByRole('button', { name: 'Set Error' }).nth(1).click()
+
+      // Both should have errors now (4 total: 2 per form)
+      await expect(page.getByText('Error: Error from child')).toHaveCount(4)
+
+      // Clear error in form 1
+      await page.getByRole('button', { name: 'Clear Error' }).first().click()
+
+      // Only form 2 should have errors now
+      await expect(page.getByText('Error: Error from child')).toHaveCount(2)
+    })
+  })
+})