Tanstack Form

import { useForm } from '@tanstack/react-form'
function MyForm() {  const form = useForm({    defaultValues: {      firstName: '',      lastName: '',      email: '',      age: 0,    },    onSubmit: async ({ value }) => {      // value is fully typed      await submitToServer(value)    },    onSubmitInvalid: ({ value, formApi }) => {      console.log('Validation failed:', formApi.state.errors)    },  })
  return (    <form      onSubmit={(e) => {        e.preventDefault()        e.stopPropagation()        form.handleSubmit()      }}    >      {/* Fields */}      <form.Subscribe        selector={(state) => ({ canSubmit: state.canSubmit, isSubmitting: state.isSubmitting })}        children={({ canSubmit, isSubmitting }) => (          <button type="submit" disabled={!canSubmit}>            {isSubmitting ? 'Submitting...' : 'Submit'}          </button>        )}      />    </form>  )}

<form.Field  name="firstName"  validators={{    onChange: ({ value }) =>      value.length < 3 ? 'Must be at least 3 characters' : undefined,  }}  children={(field) => (    <div>      <label htmlFor={field.name}>First Name</label>      <input        id={field.name}        name={field.name}        value={field.state.value}        onBlur={field.handleBlur}        onChange={(e) => field.handleChange(e.target.value)}      />      {field.state.meta.isTouched && field.state.meta.errors.length > 0 && (        <em>{field.state.meta.errors.join(', ')}</em>      )}    </div>  )}/>
<!-- Nested fields use dot notation --><form.Field name="address.city">  {(field) => (    <input      value={field.state.value}      onChange={(e) => field.handleChange(e.target.value)}      onBlur={field.handleBlur}    />  )}</form.Field>

<form.Field  name="age"  validators={{    onChange: ({ value }) => {      if (value < 18) return 'Must be 18 or older'      return undefined // undefined = valid    },    onBlur: ({ value }) => {      if (!value) return 'Required'      return undefined    },  }}/>

<form.Field  name="username"  asyncDebounceMs={500}  validators={{    onChangeAsync: async ({ value }) => {      const res = await fetch(`/api/check-username?q=${value}`)      const { available } = await res.json()      if (!available) return 'Username taken'      return undefined    },  }}>  {(field) => (    <>      <input value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />      {field.state.meta.isValidating && <span>Checking...</span>}    </>  )}</form.Field>

import { zodValidator } from '@tanstack/zod-form-adapter'import { z } from 'zod'
const form = useForm({  defaultValues: { email: '', age: 0 },  validatorAdapter: zodValidator(),  onSubmit: async ({ value }) => { /* ... */ },})
<form.Field  name="email"  validators={{    onChange: z.string().email('Invalid email'),    onBlur: z.string().min(1, 'Required'),  }}/>
<form.Field  name="age"  validators={{    onChange: z.number().min(18, 'Must be 18+'),  }}/>

const form = useForm({  defaultValues: { password: '', confirmPassword: '' },  validators: {    onChange: ({ value }) => {      if (value.password !== value.confirmPassword) {        return 'Passwords do not match'      }      return undefined    },  },})

<form.Field  name="confirmPassword"  validators={{    onChangeListenTo: ['password'], // Re-validate when password changes    onChange: ({ value, fieldApi }) => {      const password = fieldApi.form.getFieldValue('password')      if (value !== password) return 'Passwords do not match'      return undefined    },  }}/>

<form.Field name="people" mode="array">  {(field) => (    <div>      {field.state.value.map((_, index) => (        <div key={index}>          <form.Field name={`people[${index}].name`}>            {(subField) => (              <input                value={subField.state.value}                onChange={(e) => subField.handleChange(e.target.value)}              />            )}          </form.Field>          <button type="button" onClick={() => field.removeValue(index)}>            Remove          </button>        </div>      ))}      <button type="button" onClick={() => field.pushValue({ name: '', age: 0 })}>        Add Person      </button>    </div>  )}</form.Field>

<form.Field  name="country"  listeners={{    onChange: ({ value }) => {      // Side effect: reset dependent fields      form.setFieldValue('state', '')      form.setFieldValue('postalCode', '')    },  }}/>

// Render-prop subscription (fine-grained)<form.Subscribe  selector={(state) => ({ canSubmit: state.canSubmit, isDirty: state.isDirty })}  children={({ canSubmit, isDirty }) => (    <div>      {isDirty && <span>Unsaved changes</span>}      <button disabled={!canSubmit}>Save</button>    </div>  )}/>
// Hook-based subscriptionfunction FormStatus() {  const isValid = form.useStore((s) => s.isValid)  return isValid ? null : <p>Fix errors</p>}

import { formOptions } from '@tanstack/react-form'
const sharedOpts = formOptions({  defaultValues: { firstName: '', lastName: '' },})
// Reuse across componentsconst form = useForm({  ...sharedOpts,  onSubmit: async ({ value }) => { /* ... */ },})

// TanStack Start / Next.js server actionimport { ServerValidateError } from '@tanstack/react-form/nextjs'
export async function validateForm(data: FormData) {  const email = data.get('email') as string  if (await checkEmailExists(email)) {    throw new ServerValidateError({      form: 'Submission failed',      fields: { email: 'Email already registered' },    })  }}

// Type-safe field paths with DeepKeysinterface UserForm {  name: string  address: { street: string; city: string }  tags: string[]  contacts: Array<{ name: string; phone: string }>}
// TypeScript auto-completes all valid paths:// 'name', 'address', 'address.street', 'address.city', 'tags', 'contacts'<form.Field name="address.city" />     // OK<form.Field name="nonexistent" />       // Type Error!