TanStack · crutchcorn · Apr 16, 2026 · Apr 16, 2026 · Apr 16, 2026 · Apr 16, 2026
diff --git a/examples/preact/multi-step-wizard/README.md b/examples/preact/multi-step-wizard/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `pnpm install`
+- `pnpm --filter @tanstack/form-example-preact-simple dev`
diff --git a/examples/preact/multi-step-wizard/index.html b/examples/preact/multi-step-wizard/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>TanStack Form Preact Simple Example App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/preact/multi-step-wizard/package.json b/examples/preact/multi-step-wizard/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@tanstack/form-example-preact-multi-step-wizard",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3001",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsc"
+  },
+  "dependencies": {
+    "@tanstack/preact-form": "^1.29.4",
+    "preact": "^10.26.4",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "vite": "^7.2.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/preact/multi-step-wizard/src/App.tsx b/examples/preact/multi-step-wizard/src/App.tsx
@@ -0,0 +1,5 @@
+import { WizardPage } from './features/wizard/page'
+
+export default function App() {
+  return <WizardPage />
+}
diff --git a/examples/preact/multi-step-wizard/src/components/text-fields.tsx b/examples/preact/multi-step-wizard/src/components/text-fields.tsx
@@ -0,0 +1,26 @@
+import { useStore } from '@tanstack/preact-form'
+import { useFieldContext } from '../hooks/form-context'
+
+export function TextField({ label }: { label: string }) {
+  const field = useFieldContext<string>()
+
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <label>
+        <div>{label}</div>
+        <input
+          value={field.state.value}
+          onInput={(e) => field.handleChange(e.currentTarget.value)}
+          onBlur={field.handleBlur}
+        />
+      </label>
+      {errors.map((error: { message: string }) => (
+        <div key={error.message} style={{ color: 'red' }}>
+          {error.message}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/examples/preact/multi-step-wizard/src/features/wizard/page.tsx b/examples/preact/multi-step-wizard/src/features/wizard/page.tsx
@@ -0,0 +1,34 @@
+import { revalidateLogic } from '@tanstack/preact-form'
+import { z } from 'zod'
+import { useState } from 'preact/hooks'
+import { useAppForm } from '../../hooks/form'
+import { step1Schema, step2Schema, wizardFormOpts } from './shared-form'
+import { Step2Form } from './step2-subform'
+import { Step1Form } from './step1-subform'
+
+export const WizardPage = () => {
+  const [step, setStep] = useState(0)
+  const form = useAppForm({
+    ...wizardFormOpts,
+    validationLogic: revalidateLogic(),
+    validators: {
+      // onDynamic is only used when `form.handleSubmit` is called itself.
+      // When `form.FormGroup`'s `handleSubmit` is called, it will only validate the current step's schema.
+      // This means that this schema will not be called when the user submits the form group, but instead when they submit the entire form.
+      onDynamic: z.object({
+        step1: step1Schema,
+        step2: step2Schema,
+      }),
+    },
+    onSubmit: ({ value }) => {
+      alert(`Form submitted: ${JSON.stringify(value)}`)
+    },
+  })
+
+  return (
+    <>
+      {step === 0 && <Step1Form form={form} step={step} setStep={setStep} />}
+      {step === 1 && <Step2Form form={form} step={step} setStep={setStep} />}
+    </>
+  )
+}
diff --git a/examples/preact/multi-step-wizard/src/features/wizard/shared-form.tsx b/examples/preact/multi-step-wizard/src/features/wizard/shared-form.tsx
@@ -0,0 +1,21 @@
+import { formOptions } from '@tanstack/preact-form'
+import z from 'zod'
+
+export const step1Schema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+})
+
+export const step2Schema = z.object({
+  name: z.string().min(3, 'Name must be at least 3 characters'),
+})
+
+export const wizardFormOpts = formOptions({
+  defaultValues: {
+    step1: {
+      name: '',
+    },
+    step2: {
+      name: '',
+    },
+  },
+})
diff --git a/examples/preact/multi-step-wizard/src/features/wizard/step1-subform.tsx b/examples/preact/multi-step-wizard/src/features/wizard/step1-subform.tsx
@@ -0,0 +1,46 @@
+import { withForm } from '../../hooks/form'
+import { step1Schema, wizardFormOpts } from './shared-form'
+
+export const Step1Form = withForm({
+  ...wizardFormOpts,
+  props: {
+    step: 0,
+    setStep: (_step: number) => {},
+  },
+  render: function Render({ form, step, setStep }) {
+    return (
+      <form.FormGroup
+        name="step1"
+        validators={{
+          onDynamic: step1Schema,
+        }}
+        onGroupSubmit={({ value: _value }) => {
+          setStep(step + 1)
+        }}
+        onGroupSubmitInvalid={() => {
+          // Just like a form, you can also handle invalid submits at the group level, which is useful for multi-step wizards to prevent going to the next step if the current step is invalid
+        }}
+      >
+        {(formGroup) => (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              formGroup.handleSubmit()
+            }}
+          >
+            <form.AppField name="step1.name">
+              {(field) => <field.TextField label="Step 1 Name" />}
+            </form.AppField>
+
+            <form.AppForm>
+              <form.SubscribeButton label="Submit" />
+            </form.AppForm>
+            {/* formGroup contains errorMaps and errors, just like forms and fields */}
+            <pre>{JSON.stringify(formGroup.state.meta.errorMap, null, 2)}</pre>
+          </form>
+        )}
+      </form.FormGroup>
+    )
+  },
+})
diff --git a/examples/preact/multi-step-wizard/src/features/wizard/step2-subform.tsx b/examples/preact/multi-step-wizard/src/features/wizard/step2-subform.tsx
@@ -0,0 +1,42 @@
+import { withForm } from '../../hooks/form'
+import { step2Schema, wizardFormOpts } from './shared-form'
+
+export const Step2Form = withForm({
+  ...wizardFormOpts,
+  props: {
+    step: 1,
+    setStep: (_step: number) => {},
+  },
+  render: function Render({ form, step, setStep }) {
+    return (
+      <form.FormGroup
+        name="step2"
+        validators={{
+          onDynamic: step2Schema,
+        }}
+        onGroupSubmit={({ value: _value }) => {
+          form.handleSubmit()
+        }}
+      >
+        {(formGroup) => (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              formGroup.handleSubmit()
+            }}
+          >
+            <form.AppField name="step2.name">
+              {(field) => <field.TextField label="Step 2 Name" />}
+            </form.AppField>
+
+            <button onClick={() => setStep(step - 1)}>Back</button>
+            <form.AppForm>
+              <form.SubscribeButton label="Submit" />
+            </form.AppForm>
+          </form>
+        )}
+      </form.FormGroup>
+    )
+  },
+})
diff --git a/examples/preact/multi-step-wizard/src/hooks/form-context.tsx b/examples/preact/multi-step-wizard/src/hooks/form-context.tsx
@@ -0,0 +1,4 @@
+import { createFormHookContexts } from '@tanstack/preact-form'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()
diff --git a/examples/preact/multi-step-wizard/src/hooks/form.tsx b/examples/preact/multi-step-wizard/src/hooks/form.tsx
@@ -0,0 +1,27 @@
+import { createFormHook } from '@tanstack/preact-form'
+import { TextField } from '../components/text-fields'
+import { fieldContext, formContext, useFormContext } from './form-context'
+
+function SubscribeButton({ label }: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <button type="submit" disabled={isSubmitting}>
+          {label}
+        </button>
+      )}
+    </form.Subscribe>
+  )
+}
+
+export const { useAppForm, withForm, withFieldGroup } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})
diff --git a/examples/preact/multi-step-wizard/src/index.tsx b/examples/preact/multi-step-wizard/src/index.tsx
@@ -0,0 +1,10 @@
+import { render } from 'preact'
+import App from './App'
+
+const rootElement = document.getElementById('root')
+
+if (!rootElement) {
+  throw new Error('Root element not found')
+}
+
+render(<App />, rootElement)
diff --git a/examples/preact/multi-step-wizard/tsconfig.json b/examples/preact/multi-step-wizard/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/multi-step-wizard/vite.config.ts b/examples/preact/multi-step-wizard/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+export default defineConfig({
+  plugins: [preact()],
+})
diff --git a/examples/react/multi-step-wizard/.eslintrc.cjs b/examples/react/multi-step-wizard/.eslintrc.cjs
@@ -0,0 +1,11 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  rules: {
+    'react/no-children-prop': 'off',
+  },
+}
+
+module.exports = config
diff --git a/examples/react/multi-step-wizard/.gitignore b/examples/react/multi-step-wizard/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/react/multi-step-wizard/README.md b/examples/react/multi-step-wizard/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/react/multi-step-wizard/index.html b/examples/react/multi-step-wizard/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>TanStack Form React Simple Example App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/multi-step-wizard/package.json b/examples/react/multi-step-wizard/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@tanstack/form-example-react-multi-step-wizard",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3001",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "tsc"
+  },
+  "dependencies": {
+    "@tanstack/react-form": "^1.29.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.24",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "vite": "^7.2.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}