diff --git a/resources/js/Pages/forms.jsx b/resources/js/Pages/forms.jsx
index f5eed89f..d03880b9 100644
--- a/resources/js/Pages/forms.jsx
+++ b/resources/js/Pages/forms.jsx
@@ -5,6 +5,7 @@ export const meta = {
   title: 'Forms',
   links: [
     { url: '#form-component', name: 'Form component' },
+    { url: '#precognition', name: 'Precognition' },
     { url: '#form-helper', name: 'Form helper' },
     { url: '#server-side-responses', name: 'Server-side responses' },
     { url: '#server-side-validation', name: 'Server-side validation' },
@@ -1096,6 +1097,588 @@ export default function () {
         methods, so reactive state like <Code>isDirty</Code> and <Code>errors</Code> should be accessed via{' '}
         <A href="#slot-props">slot props</A> instead.
       </P>
+      <H2>Precognition</H2>
+      <P>
+        The <Code>{'<Form>'}</Code> component includes built-in support for precognition, enabling real-time form
+        validation without duplicating your server-side validation rules on the client.
+      </P>
+      <P>
+        Before using precognition, ensure your server-side framework is configured to handle precognitive requests.
+        Laravel users can follow the <A href="https://laravel.com/docs/precognition">Precognition documentation</A> for
+        setup instructions. Other frameworks can implement precognition support by following the{' '}
+        <A href="/the-protocol#request-headers">precognition protocol</A>.
+      </P>
+      <H3>Basic validation</H3>
+      <P>
+        Once your server is configured, call <Code>validate()</Code> with a field name to trigger validation for that
+        field. The <Code>invalid()</Code> helper checks if a field has validation errors, while <Code>validating</Code>{' '}
+        indicates when a request is in progress.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'Vue',
+            language: 'markup',
+            code: dedent`
+              <Form action="/users" method="post" #default="{ errors, invalid, validate, validating }">
+                <label for="name">Name:</label>
+                <input id="name" name="name" @change="validate('name')" />
+                <p v-if="invalid('name')">{{ errors.name }}</p>
+
+                <label for="email">Email:</label>
+                <input id="email" name="email" @change="validate('email')" />
+                <p v-if="invalid('email')">{{ errors.email }}</p>
+
+                <p v-if="validating">Validating...</p>
+
+                <button type="submit">Create User</button>
+              </Form>
+            `,
+          },
+          {
+            name: 'React',
+            language: 'jsx',
+            code: dedent`
+              <Form action="/users" method="post">
+                {({ errors, invalid, validate, validating }) => (
+                  <>
+                    <label htmlFor="name">Name:</label>
+                    <input id="name" name="name" onChange={() => validate('name')} />
+                    {invalid('name') && <p>{errors.name}</p>}
+
+                    <label htmlFor="email">Email:</label>
+                    <input id="email" name="email" onChange={() => validate('email')} />
+                    {invalid('email') && <p>{errors.email}</p>}
+
+                    {validating && <p>Validating...</p>}
+
+                    <button type="submit">Create User</button>
+                  </>
+                )}
+              </Form>
+            `,
+          },
+          {
+            name: 'Svelte 4',
+            language: 'html',
+            code: dedent`
+              <Form
+                action="/users"
+                method="post"
+                let:errors
+                let:invalid
+                let:validate
+                let:validating
+              >
+                <label for="name">Name:</label>
+                <input id="name" name="name" on:change={() => validate('name')} />
+                {#if invalid('name')}
+                  <p>{errors.name}</p>
+                {/if}
+
+                <label for="email">Email:</label>
+                <input id="email" name="email" on:change={() => validate('email')} />
+                {#if invalid('email')}
+                  <p>{errors.email}</p>
+                {/if}
+
+                {#if validating}
+                  <p>Validating...</p>
+                {/if}
+
+                <button type="submit">Create User</button>
+              </Form>
+            `,
+          },
+          {
+            name: 'Svelte 5',
+            language: 'html',
+            code: dedent`
+              <Form action="/users" method="post">
+                {#snippet children({ errors, invalid, validate, validating })}
+                  <label for="name">Name:</label>
+                  <input id="name" name="name" onchange={() => validate('name')} />
+                  {#if invalid('name')}
+                    <p>{errors.name}</p>
+                  {/if}
+
+                  <label for="email">Email:</label>
+                  <input id="email" name="email" onchange={() => validate('email')} />
+                  {#if invalid('email')}
+                    <p>{errors.email}</p>
+                  {/if}
+
+                  {#if validating}
+                    <p>Validating...</p>
+                  {/if}
+
+                  <button type="submit">Create User</button>
+                {/snippet}
+              </Form>
+            `,
+          },
+        ]}
+      />
+      <P>
+        You can also use the <Code>valid()</Code> helper to check if a field has passed validation. This is useful for
+        showing success states or visual indicators.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'Vue',
+            language: 'markup',
+            code: dedent`
+              <Form action="/users" method="post" #default="{ errors, invalid, valid, validate }">
+                <input name="email" @change="validate('email')" />
+                <p v-if="valid('email')">Valid email address</p>
+                <p v-if="invalid('email')">{{ errors.email }}</p>
+              </Form>
+            `,
+          },
+          {
+            name: 'React',
+            language: 'jsx',
+            code: dedent`
+              <Form action="/users" method="post">
+                {({ errors, invalid, valid, validate }) => (
+                  <>
+                    <input name="email" onChange={() => validate('email')} />
+                    {valid('email') && <p>Valid email address</p>}
+                    {invalid('email') && <p>{errors.email}</p>}
+                  </>
+                )}
+              </Form>
+            `,
+          },
+          {
+            name: 'Svelte',
+            language: 'html',
+            code: dedent`
+              <Form action="/users" method="post" let:errors let:invalid let:valid let:validate>
+                <input name="email" on:change={() => validate('email')} />
+                {#if valid('email')}
+                  <p>Valid email address</p>
+                {/if}
+                {#if invalid('email')}
+                  <p>{errors.email}</p>
+                {/if}
+              </Form>
+            `,
+          },
+        ]}
+      />
+      <H3>Debouncing</H3>
+      <P>
+        Validation requests are automatically debounced. The first validation request for a field fires immediately to
+        provide instant feedback. Subsequent changes are then debounced, waiting 1500ms before sending another request.
+        You can configure the debounce timeout using the{' '}
+        <React>
+          <Code>validateTimeout</Code>
+        </React>
+        <Svelte>
+          <Code>validateTimeout</Code>
+        </Svelte>
+        <Vue>
+          <Code>validate-timeout</Code>
+        </Vue>{' '}
+        prop.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'Vue',
+            language: 'markup',
+            code: dedent`
+              <Form action="/users" method="post" :validate-timeout="500">
+                <!-- ... -->
+              </Form>
+            `,
+          },
+          {
+            name: 'React',
+            language: 'jsx',
+            code: dedent`
+              <Form action="/users" method="post" validateTimeout={500}>
+                {/* ... */}
+              </Form>
+            `,
+          },
+          {
+            name: 'Svelte',
+            language: 'html',
+            code: dedent`
+              <Form action="/users" method="post" validateTimeout={500}>
+                <!-- ... -->
+              </Form>
+            `,
+          },
+        ]}
+      />
+      <H3>Validating multiple fields</H3>
+      <P>
+        You can validate multiple fields at once by passing an array to <Code>validate()</Code>. This is useful when you
+        want to validate an entire section of a form at once.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'Vue',
+            language: 'markup',
+            code: dedent`
+              <Form action="/users" method="post" #default="{ validate, invalid, errors }">
+                <input name="name" />
+                <p v-if="invalid('name')">{{ errors.name }}</p>
+
+                <input name="email" />
+                <p v-if="invalid('email')">{{ errors.email }}</p>
+
+                <button type="button" @click="validate(['name', 'email'])">
+                  Validate
+                </button>
+              </Form>
+            `,
+          },
+          {
+            name: 'React',
+            language: 'jsx',
+            code: dedent`
+              <Form action="/users" method="post">
+                {({ validate, invalid, errors }) => (
+                  <>
+                    <input name="name" />
+                    {invalid('name') && <p>{errors.name}</p>}
+
+                    <input name="email" />
+                    {invalid('email') && <p>{errors.email}</p>}
+
+                    <button type="button" onClick={() => validate(['name', 'email'])}>
+                      Validate
+                    </button>
+                  </>
+                )}
+              </Form>
+            `,
+          },
+          {
+            name: 'Svelte',
+            language: 'html',
+            code: dedent`
+              <Form action="/users" method="post" let:validate let:invalid let:errors>
+                <input name="name" />
+                {#if invalid('name')}
+                  <p>{errors.name}</p>
+                {/if}
+
+                <input name="email" />
+                {#if invalid('email')}
+                  <p>{errors.email}</p>
+                {/if}
+
+                <button type="button" on:click={() => validate(['name', 'email'])}>
+                  Validate
+                </button>
+              </Form>
+            `,
+          },
+        ]}
+      />
+      <H3>Touch and validate</H3>
+      <P>
+        The <Code>touch()</Code> method marks fields as "touched" without triggering validation. This is useful for
+        tracking which fields the user has interacted with. You can then validate all touched fields at once by calling{' '}
+        <Code>validate()</Code> without arguments.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'Vue',
+            language: 'markup',
+            code: dedent`
+              <Form action="/users" method="post" #default="{ validate, touch, touched }">
+                <input name="name" @blur="touch('name')" />
+                <input name="email" @blur="touch('email')" />
+                <input name="phone" @blur="touch('phone')" />
+
+                <button type="button" @click="validate()">Validate Touched Fields</button>
+
+                <p v-if="touched('name')">Name has been touched</p>
+              </Form>
+            `,
+          },
+          {
+            name: 'React',
+            language: 'jsx',
+            code: dedent`
+              <Form action="/users" method="post">
+                {({ validate, touch, touched }) => (
+                  <>
+                    <input name="name" onBlur={() => touch('name')} />
+                    <input name="email" onBlur={() => touch('email')} />
+                    <input name="phone" onBlur={() => touch('phone')} />
+
+                    <button type="button" onClick={() => validate()}>Validate Touched Fields</button>
+
+                    {touched('name') && <p>Name has been touched</p>}
+                  </>
+                )}
+              </Form>
+            `,
+          },
+          {
+            name: 'Svelte',
+            language: 'html',
+            code: dedent`
+              <Form action="/users" method="post" let:validate let:touch let:touched>
+                <input name="name" on:blur={() => touch('name')} />
+                <input name="email" on:blur={() => touch('email')} />
+                <input name="phone" on:blur={() => touch('phone')} />
+
+                <button type="button" on:click={() => validate()}>Validate Touched Fields</button>
+
+                {#if touched('name')}
+                  <p>Name has been touched</p>
+                {/if}
+              </Form>
+            `,
+          },
+        ]}
+      />
+      <P>
+        The <Code>touched()</Code> helper can also be called with a specific field name to check if that field has been
+        touched. In addition to resetting one or more values with the <Code>reset()</Code> method, it also clears the
+        touched state for those fields.
+      </P>
+      <H3>File validation</H3>
+      <P>
+        By default, files are not included in precognitive validation requests to avoid unnecessary uploads. If you need
+        to validate file fields, set{' '}
+        <React>
+          <Code>validateFiles={'{true}'}</Code>
+        </React>
+        <Svelte>
+          <Code>validateFiles={'{true}'}</Code>
+        </Svelte>
+        <Vue>
+          <Code>:validate-files="true"</Code>
+        </Vue>{' '}
+        on the form. This will send files to the server during validation, allowing you to validate file size, type, and
+        other attributes.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'Vue',
+            language: 'markup',
+            code: dedent`
+              <Form
+                action="/users"
+                method="post"
+                :validate-files="true"
+                #default="{ validate, invalid, errors }"
+              >
+                <input type="file" name="avatar" @change="validate('avatar')" />
+                <p v-if="invalid('avatar')">{{ errors.avatar }}</p>
+              </Form>
+            `,
+          },
+          {
+            name: 'React',
+            language: 'jsx',
+            code: dedent`
+              <Form action="/users" method="post" validateFiles={true}>
+                {({ validate, invalid, errors }) => (
+                  <>
+                    <input type="file" name="avatar" onChange={() => validate('avatar')} />
+                    {invalid('avatar') && <p>{errors.avatar}</p>}
+                  </>
+                )}
+              </Form>
+            `,
+          },
+          {
+            name: 'Svelte',
+            language: 'html',
+            code: dedent`
+              <Form
+                action="/users"
+                method="post"
+                validateFiles={true}
+                let:validate
+                let:invalid
+                let:errors
+              >
+                <input type="file" name="avatar" on:change={() => validate('avatar')} />
+                {#if invalid('avatar')}
+                  <p>{errors.avatar}</p>
+                {/if}
+              </Form>
+            `,
+          },
+        ]}
+      />
+      <H3>Validation callbacks</H3>
+      <P>
+        The <Code>validate()</Code> method accepts several callbacks that let you respond to validation results. Use{' '}
+        <Code>onSuccess</Code> when validation passes, <Code>onError</Code> when it fails, and <Code>onFinish</Code>{' '}
+        when validation completes regardless of the result.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'JavaScript',
+            language: 'js',
+            code: dedent`
+              validate('username', {
+                onSuccess: () => {
+                  // Hide loading indicator, show success icon, etc.
+                },
+                onError: (errors) => {
+                  // Log errors, show notification, etc.
+                  console.error(errors.username)
+                },
+                onFinish: () => {
+                  // Always runs after validation
+                },
+              })
+            `,
+          },
+        ]}
+      />
+      <P>
+        The <Code>onBefore</Code> callback allows you to intercept validation requests before they're sent to the
+        server. Return <Code>false</Code> to prevent validation from occurring. This is useful for implementing
+        conditional validation logic or rate limiting.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'JavaScript',
+            language: 'js',
+            code: dedent`
+              validate('username', {
+                onBefore: (newRequest, previousRequest) => {
+                  // Only validate if username meets minimum length
+                  if (newRequest.data.username.length < 3) {
+                    return false
+                  }
+                },
+              })
+            `,
+          },
+        ]}
+      />
+      <P>
+        For handling unexpected server errors during validation (non-422 responses), use the <Code>onException</Code>{' '}
+        callback. This allows you to gracefully handle network errors, server errors, or other unexpected issues.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'JavaScript',
+            language: 'js',
+            code: dedent`
+              validate('email', {
+                onException: (error) => {
+                  console.error('Validation request failed:', error)
+                  // Show user-friendly error message
+                  alert('Unable to validate. Please check your connection.')
+                },
+              })
+            `,
+          },
+        ]}
+      />
+      <H3>Validation options</H3>
+      <P>
+        Instead of passing fields as an array, you can pass an options object with <Code>only</Code> to specify which
+        fields to validate. This also allows you to include other options like <Code>headers</Code> and{' '}
+        <Code>errorBag</Code>.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'JavaScript',
+            language: 'js',
+            code: dedent`
+              validate({
+                only: ['name', 'email'],
+                headers: { 'X-Custom': 'value' },
+                errorBag: 'registration',
+                onSuccess: () => {
+                  console.log('Validation passed')
+                },
+              })
+            `,
+          },
+        ]}
+      />
+      <H3>Error formatting</H3>
+      <P>
+        Laravel validation errors are typically arrays of messages per field. For example, a field might have multiple
+        validation rules that each produce an error. Normally, Laravel's Inertia middleware simplifies these to single
+        strings (the first error only) before sending them to the client. However, during precognitive validation, the{' '}
+        <Code>422</Code> response returns early (without the Inertia middleware handling it) so the{' '}
+        <Code>{'<Form>'}</Code> component handles this simplification on the frontend instead.
+      </P>
+      <P>
+        By default, validation errors are automatically simplified to strings. If you need access to all error messages
+        for a field, you can disable this behavior by setting{' '}
+        <React>
+          <Code>simpleValidationErrors={'{false}'}</Code>
+        </React>
+        <Svelte>
+          <Code>simpleValidationErrors={'{false}'}</Code>
+        </Svelte>
+        <Vue>
+          <Code>:simple-validation-errors="false"</Code>
+        </Vue>{' '}
+        on the form.
+      </P>
+      <H3>Canceling validation</H3>
+      <P>
+        Validation requests are automatically canceled when a new validation is triggered for the same form, preventing
+        race conditions and ensuring only the most recent validation is processed. You can also manually cancel pending
+        validation requests using the <Code>cancelValidation()</Code> method.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'Vue',
+            language: 'markup',
+            code: dedent`
+              <Form action="/users" method="post" #default="{ cancelValidation }">
+                <!-- ... -->
+                <button type="button" @click="cancelValidation">Cancel Validation</button>
+              </Form>
+            `,
+          },
+          {
+            name: 'React',
+            language: 'jsx',
+            code: dedent`
+              <Form action="/users" method="post">
+                {({ cancelValidation }) => (
+                  <>
+                    {/* ... */}
+                    <button type="button" onClick={cancelValidation}>Cancel Validation</button>
+                  </>
+                )}
+              </Form>
+            `,
+          },
+          {
+            name: 'Svelte',
+            language: 'html',
+            code: dedent`
+              <Form action="/users" method="post" let:cancelValidation>
+                <!-- ... -->
+                <button type="button" on:click={cancelValidation}>Cancel Validation</button>
+              </Form>
+            `,
+          },
+        ]}
+      />
       <H2>Form helper</H2>
       <P>
         In addition to the <Code>{'<Form>'}</Code> component, Inertia also provides a <Code>useForm</Code> helper for
diff --git a/resources/js/Pages/the-protocol.jsx b/resources/js/Pages/the-protocol.jsx
index 7db6967e..b1fe21ff 100644
--- a/resources/js/Pages/the-protocol.jsx
+++ b/resources/js/Pages/the-protocol.jsx
@@ -182,6 +182,18 @@ export default function () {
           appended or prepended when using <A href="/infinite-scroll">Infinite scroll</A>.
         </Li>
       </Ol>
+      <P>
+        The following headers are used for <A href="/forms#precognition">precognitive form validation</A>.
+      </P>
+      <Ol>
+        <Li>
+          <Strong>Precognition:</Strong> Set to <Code>true</Code> to indicate this is a precognitive validation request.
+        </Li>
+        <Li>
+          <Strong>Precognition-Validate-Only:</Strong> Comma-separated list of field names to validate during{' '}
+          precognition requests.
+        </Li>
+      </Ol>
       <H2>Response headers</H2>
       <P>
         The following headers should be sent by your server-side adapter in Inertia responses. If you're using an
@@ -519,6 +531,19 @@ export default function () {
           <Code>X-Inertia-Location</Code> header and triggers a <Code>window.location</Code> redirect client-side.
         </Li>
       </Ol>
+      <P>
+        The following status codes are used for <A href="/forms#precognition">precognitive form validation</A>.
+      </P>
+      <Ol>
+        <Li>
+          <Strong>204 No Content:</Strong> Used for successful precognition validation requests when no validation
+          errors are found.
+        </Li>
+        <Li>
+          <Strong>422 Unprocessable Entity:</Strong> Used for precognition validation requests when validation errors
+          are found. The response body should contain the validation errors.
+        </Li>
+      </Ol>
     </>
   )
 }