### Run Example in Development Mode

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Starts the development server for a specific example, allowing local testing.

```bash
pnpm run dev
```

--------------------------------

### Install dependencies and start development server

Source: https://github.com/tanstack/form/blob/main/examples/react/tanstack-start/README.md

Install project dependencies using pnpm and start the development server. This command rebuilds assets automatically on file changes and starts the app in development mode.

```shell
pnpm install
pnpm dev
```

--------------------------------

### Start Project Dependencies

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Run this command in the root directory to install dependencies and start the auto-build process.

```bash
npm start
```

--------------------------------

### Create a Basic Form with TanStack Form and SolidJS

Source: https://github.com/tanstack/form/blob/main/docs/framework/solid/quick-start.md

This snippet demonstrates how to set up a basic form using `createForm` from `@tanstack/solid-form`. It initializes a form with a `fullName` field and handles form submission, logging the form's value to the console. This example focuses on minimal setup and does not include validation or error handling.

```tsx
import { createForm } from '@tanstack/solid-form'

function App() {
  const form = createForm(() => ({
    defaultValues: {
      fullName: '',
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value)
    },
  }))

  return (
    <div>
      <h1>Simple Form Example</h1>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          e.stopPropagation()
          form.handleSubmit()
        }}
      >
        <div>
          <form.Field
            name="fullName"
            children={(field) => (
              <input
                name={field().name}
                value={field().state.value}
                onBlur={field().handleBlur}
                onInput={(e) => field().handleChange(e.target.value)}
              />
            )}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}
```

--------------------------------

### Install TanStack Devtools and Form Plugin

Source: https://github.com/tanstack/form/blob/main/docs/framework/solid/guides/devtools.md

Install the TanStack Devtools library and the TanStack Form devtools plugin for your framework adapter. This example uses Solid framework adapters (@tanstack/solid-devtools and @tanstack/solid-form-devtools).

```bash
npm i @tanstack/solid-devtools
npm i @tanstack/solid-form-devtools
```

--------------------------------

### Complete Array Form Example with SolidJS

Source: https://github.com/tanstack/form/blob/main/docs/framework/solid/guides/arrays.md

A comprehensive example demonstrating the setup of an array form, including adding new items, rendering subfields, and handling form submission. This combines all previous concepts into a functional form.

```jsx
function App() {
  const form = createForm(() => ({
    defaultValues: {
      people: [],
    },
    onSubmit: ({ value }) => alert(JSON.stringify(value)),
  }))

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          e.stopPropagation()
          form.handleSubmit()
        }}
      >
        <form.Field name="people" mode="array">
          {(field) => (
            <div>
              <Show when={field().state.value.length > 0}>
                {/* Do not change this to For or the test will fail */}
                <Index each={field().state.value}>
                  {(_, i) => (
                    <form.Field name={`people[${i}].name`}>
                      {(subField) => (
                        <div>
                          <label>
                            <div>Name for person {i}</div>
                            <input
                              value={subField().state.value}
                              onInput={(e) => {
                                subField().handleChange(e.currentTarget.value)
                              }}
                            />
                          </label>
                        </div>
                      )}
                    </form.Field>
                  )}
                </Index>
              </Show>

              <button
                onClick={() => field().pushValue({ name: '', age: 0 })}
                type="button"
              >
                Add person
              </button>
            </div>
          )}
        </form.Field>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}
```

--------------------------------

### Start Documentation Development Server

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Run this command in the /docs directory to start the development server for the documentation.

```bash
npm run dev
```

--------------------------------

### Complete Form Composition Example with Custom Hooks

Source: https://github.com/tanstack/form/blob/main/docs/framework/preact/guides/form-composition.md

Full example showing form hook setup with custom TextField and SubscribeButton components, form options configuration, nested form implementation, and parent form usage. Demonstrates the complete workflow from hook creation through component composition.

```tsx
// /src/hooks/form.ts, to be used across the entire app
const { fieldContext, useFieldContext, formContext, useFormContext } =
  createFormHookContexts()

function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>()
  return (
    <label>
      <span>{label}</span>
      <input
        value={field.state.value}
        onInput={(e) => field.handleChange(e.target.value)}
      />
    </label>
  )
}

function SubscribeButton({ label }: { label: string }) {
  const form = useFormContext()
  return (
    <form.Subscribe selector={(state) => state.isSubmitting}>
      {(isSubmitting) => <button disabled={isSubmitting}>{label}</button>}
    </form.Subscribe>
  )
}

const { useAppForm, withForm } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {
    SubscribeButton,
  },
  fieldContext,
  formContext,
})

// /src/features/people/shared-form.ts, to be used across `people` features
const formOpts = formOptions({
  defaultValues: {
    firstName: 'John',
    lastName: 'Doe',
  },
})

// /src/features/people/nested-form.ts, to be used in the `people` page
const ChildForm = withForm({
  ...formOpts,
  // Optional, but adds props to the `render` function outside of `form`
  props: {
    title: 'Child Form',
  },
  render: ({ form, title }) => {
    return (
      <div>
        <p>{title}</p>
        <form.AppField
          name="firstName"
          children={(field) => <field.TextField label="First Name" />}
        />
        <form.AppForm>
          <form.SubscribeButton label="Submit" />
        </form.AppForm>
      </div>
    )
  },
})

// /src/features/people/page.ts
const Parent = () => {
  const form = useAppForm({
    ...formOpts,
  })

  return <ChildForm form={form} title={'Testing'} />
}
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/form/blob/main/examples/solid/multi-step-wizard/README.md

Install project dependencies using npm, pnpm, or yarn.

```bash
$ npm install # or pnpm install or yarn install
```

--------------------------------

### Install TanStack.com Dependencies

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Installs dependencies for the TanStack.com project.

```bash
pnpm i
```

--------------------------------

### Run Development Server with npm

Source: https://github.com/tanstack/form/blob/main/examples/solid/devtools/README.md

Starts the development server in development mode, making the application accessible at http://localhost:5173 in the browser. Enables hot module reloading for rapid development iteration.

```bash
npm run dev
```

--------------------------------

### Run Development Server

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Starts the development server to watch for changes and rebuild as needed.

```bash
pnpm run watch
```

--------------------------------

### Install Project Dependencies with npm

Source: https://github.com/tanstack/form/blob/main/examples/solid/standard-schema/README.md

Installs all project dependencies using npm package manager. Alternative package managers like pnpm or yarn can also be used. This is the first step required before running any development or build scripts.

```bash
npm install
```

--------------------------------

### Install Project Dependencies with npm

Source: https://github.com/tanstack/form/blob/main/examples/solid/devtools/README.md

Installs all required project dependencies using npm package manager. Alternatively, pnpm or yarn can be used as package managers. This is the first step required before running any development or build scripts.

```bash
npm install
```

--------------------------------

### Run Development Server with npm

Source: https://github.com/tanstack/form/blob/main/examples/solid/standard-schema/README.md

Starts the development server in development mode, making the application accessible at http://localhost:5173 in the browser. Enables hot module reloading for real-time code changes during development.

```bash
npm run dev
```

--------------------------------

### Complete TanStack Form Array Example in Vue

Source: https://github.com/tanstack/form/blob/main/docs/framework/vue/guides/arrays.md

This comprehensive example demonstrates a full TanStack Form implementation with an array field. It includes form setup, iterating over array items, adding new items, and handling subfield input.

```vue
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'

const form = useForm({
  defaultValues: {
    people: [] as Array<{ age: number; name: string }>,
  },
  onSubmit: ({ value }) => alert(JSON.stringify(value)),
})
</script>

<template>
  <form
    @submit="
      (e) => {
        e.preventDefault()
        e.stopPropagation()
        form.handleSubmit()
      }
    "
  >
    <div>
      <form.Field name="people" mode="array">
        <template v-slot="{ field, state }">
          <div>
            <form.Field
              v-for="(_, i) of field.state.value"
              :key="i"
              :name="`people[${i}].name`"
            >
              <template v-slot="{ field: subField, state }">
                <div>
                  <label>
                    <div>Name for person {{ i }}</div>
                    <input
                      :value="subField.state.value"
                      @input="
                        (e) =>
                          subField.handleChange(
                            (e.target as HTMLInputElement).value,
                          )
                      "
                    />
                  </label>
                </div>
              </template>
            </form.Field>

            <button
              @click="field.pushValue({ name: '', age: 0 })"
              type="button"
            >
              Add person
            </button>
          </div>
        </template>
      </form.Field>
    </div>
    <form.Subscribe>
      <template v-slot="{ canSubmit, isSubmitting }">
        <button type="submit" :disabled="!canSubmit">
          {{ isSubmitting ? '...' : 'Submit' }}
        </button>
      </template>
    </form.Subscribe>
  </form>
</template>
```

--------------------------------

### Install Expo Project Dependencies

Source: https://github.com/tanstack/form/blob/main/examples/react/expo/README.md

Use this command to install all necessary packages for your Expo application after cloning or initializing the project.

```bash
npm install
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Installs project dependencies using pnpm. Ensure you are using the version specified in package.json.

```bash
pnpm install
```

--------------------------------

### Initialize TanStack Form with createFormHook for Reusable Components (TSX)

Source: https://github.com/tanstack/form/blob/main/docs/framework/react/quick-start.md

This example demonstrates how to set up a TanStack Form using `createFormHook` for creating reusable form instances and components. It shows how to define default values, integrate schema-based validation (e.g., Zod), and handle form submission. The `useAppForm` hook and `form.AppField` components are used to bind custom UI elements while maintaining type safety, ideal for large-scale applications.

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
// Form components that pre-bind events from the form hook; check our "Form Composition" guide for more
import { TextField, NumberField, SubmitButton } from '~our-app/ui-library'
// We also support Valibot, ArkType, and any other standard schema library
import { z } from 'zod'

const { fieldContext, formContext } = createFormHookContexts()

// Allow us to bind components to the form to keep type safety but reduce production boilerplate
// Define this once to have a generator of consistent form instances throughout your app
const { useAppForm } = createFormHook({
  fieldComponents: {
    TextField,
    NumberField,
  },
  formComponents: {
    SubmitButton,
  },
  fieldContext,
  formContext,
})

const PeoplePage = () => {
  const form = useAppForm({
    defaultValues: {
      username: '',
      age: 0,
    },
    validators: {
      // Pass a schema or function to validate
      onChange: z.object({
        username: z.string(),
        age: z.number().min(13),
      }),
    },
    onSubmit: ({ value }) => {
      // Do something with form data
      alert(JSON.stringify(value, null, 2))
    },
  })

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        form.handleSubmit()
      }}
    >
      <h1>Personal Information</h1>
      {/* Components are bound to `form` and `field` to ensure extreme type safety */}
      {/* Use `form.AppField` to render a component bound to a single field */}
      <form.AppField
        name="username"
        children={(field) => <field.TextField label="Full Name" />}
      />
      {/* The "name" property will throw a TypeScript error if typo'd  */}
      <form.AppField
        name="age"
        children={(field) => <field.NumberField label="Age" />}
      />
      {/* Components in `form.AppForm` have access to the form context */}
      <form.AppForm>
        <form.SubmitButton />
      </form.AppForm>
    </form>
  )
}

const rootElement = document.getElementById('root')!
ReactDOM.createRoot(rootElement).render(<PeoplePage />)
```

--------------------------------

### Run TanStack.com Development Server

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Starts the TanStack.com development server, typically accessible at http://localhost:3000.

```bash
pnpm dev
```

--------------------------------

### Clone TanStack repositories for local development

Source: https://github.com/tanstack/form/blob/main/examples/react/tanstack-start/README.md

Clone both the TanStack.com repository and the specific project repository (e.g., TanStack Form) into the tanstack directory. This setup allows local editing of documentation files that will be previewed in the development environment.

```shell
cd tanstack
git clone git@github.com:TanStack/tanstack.com.git
git clone git@github.com:TanStack/form.git
```

--------------------------------

### Complete Example of Array Form Handling in TanStack Form (JSX)

Source: https://github.com/tanstack/form/blob/main/docs/framework/preact/guides/arrays.md

This comprehensive example demonstrates how to manage an array of objects within a form, including initialization, rendering dynamic subfields, adding new items, and form submission.

```jsx
function App() {
  const form = useForm({
    defaultValues: {
      people: [],
    },
    onSubmit({ value }) {
      alert(JSON.stringify(value))
    },
  })

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          e.stopPropagation()
          form.handleSubmit()
        }}
      >
        <form.Field name="people" mode="array">
          {(field) => {
            return (
              <div>
                {field.state.value.map((_, i) => {
                  return (
                    <form.Field key={i} name={`people[${i}].name`}>
                      {(subField) => {
                        return (
                          <div>
                            <label>
                              <div>Name for person {i}</div>
                              <input
                                value={subField.state.value}
                                onInput={(e) =>
                                  subField.handleChange(e.target.value)
                                }
                              />
                            </label>
                          </div>
                        )
                      }}
                    </form.Field>
                  )
                })}
                <button
                  onClick={() => field.pushValue({ name: '', age: 0 })}
                  type="button"
                >
                  Add person
                </button>
              </div>
            )
          }}
        </form.Field>
        <form.Subscribe
          selector={(state) => [state.canSubmit, state.isSubmitting]}
          children={([canSubmit, isSubmitting]) => (
            <button type="submit" disabled={!canSubmit}>
              {isSubmitting ? '...' : 'Submit'}
            </button>
          )}
        />
      </form>
    </div>
  )
}
```

--------------------------------

### Full Example of Array Form Management

Source: https://github.com/tanstack/form/blob/main/docs/framework/svelte/guides/arrays.md

A comprehensive Svelte example demonstrating how to manage an array of objects in TanStack Form, including defining the array field, iterating over items, adding new items, handling subfields, and form submission.

```svelte
<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      people: [] as Array<{ age: number; name: string }>,
    },
    onSubmit: ({ value }) => alert(JSON.stringify(value)),
  }))
</script>

<form
  id="form"
  onsubmit={(e) => {
    e.preventDefault()
    e.stopPropagation()
    form.handleSubmit()
  }}
>
  <form.Field name="people" mode="array">
    {#snippet children(field)}
      <div>
        {#each field.state.value as person, i}
          <form.Field name={`people[${i}].name`}>
            {#snippet children(subField)}
              <div>
                <label>
                  <div>Name for person {i}</div>
                  <input
                    value={person.name}
                    oninput={(e: Event) => {
                      const target = e.target as HTMLInputElement
                      subField.handleChange(target.value)
                    }}
                  />
                </label>
              </div>
            {/snippet}
          </form.Field>
        {/each}

        <button
          onclick={() => field.pushValue({ name: '', age: 0 })}
          type="button"
        >
          Add person
        </button>
      </div>
    {/snippet}
  </form.Field>

  <button type="submit"> Submit </button>
</form>
```

--------------------------------

### Create Basic Form with TanStack Vue Form

Source: https://github.com/tanstack/form/blob/main/docs/framework/vue/quick-start.md

Initialize a TanStack Form instance with default values and submit handler, then render a form with a single text input field. The form captures user input through field state management and handles form submission via the handleSubmit method. This example provides the foundational pattern for building forms with TanStack Form in Vue applications.

```vue
<!-- App.vue -->
<script setup>
import { useForm } from '@tanstack/vue-form'

const form = useForm({
  defaultValues: {
    fullName: '',
  },
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
</script>

<template>
  <div>
    <form @submit.prevent.stop="form.handleSubmit">
      <div>
        <form.Field name="fullName">
          <template v-slot="{ field }">
            <input
              :name="field.name"
              :value="field.state.value"
              @blur="field.handleBlur"
              @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
            />
          </template>
        </form.Field>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
```

--------------------------------

### Get Angular CLI Help

Source: https://github.com/tanstack/form/blob/main/examples/angular/array/README.md

Displays help information for Angular CLI commands, providing guidance on usage and options.

```bash
ng help
```

--------------------------------

### Commit Message Example: Feature

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Example of a commit message for a new feature, specifying the scope and subject.

```text
feat(pencil): add `graphiteWidth` option
```

--------------------------------

### Complete React Form Composition Example

Source: https://github.com/tanstack/form/blob/main/docs/framework/react/guides/form-composition.md

This example demonstrates the full composition pattern for React forms, including custom form hooks, field components (TextField), form components (SubscribeButton), and their integration into parent and child forms. It shows how to define form options, render fields, and handle form submission states.

```tsx
// /src/hooks/form.ts, to be used across the entire app
const { fieldContext, useFieldContext, formContext, useFormContext } =
  createFormHookContexts()

function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>()
  return (
    <label>
      <span>{label}</span>
      <input
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    </label>
  )
}

function SubscribeButton({ label }: { label: string }) {
  const form = useFormContext()
  return (
    <form.Subscribe selector={(state) => state.isSubmitting}>
      {(isSubmitting) => <button disabled={isSubmitting}>{label}</button>}
    </form.Subscribe>
  )
}

const { useAppForm, withForm } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {
    SubscribeButton,
  },
  fieldContext,
  formContext,
})

// /src/features/people/shared-form.ts, to be used across `people` features
const formOpts = formOptions({
  defaultValues: {
    firstName: 'John',
    lastName: 'Doe',
  },
})

// /src/features/people/nested-form.ts, to be used in the `people` page
const ChildForm = withForm({
  ...formOpts,
  // Optional, but adds props to the `render` function outside of `form`
  props: {
    title: 'Child Form',
  },
  render: ({ form, title }) => {
    return (
      <div>
        <p>{title}</p>
        <form.AppField
          name="firstName"
          children={(field) => <field.TextField label="First Name" />}
        />
        <form.AppForm>
          <form.SubscribeButton label="Submit" />
        </form.AppForm>
      </div>
    )
  },
})

// /src/features/people/page.ts
const Parent = () => {
  const form = useAppForm({
    ...formOpts,
  })

  return <ChildForm form={form} title={'Testing'} />
}
```

--------------------------------

### Run Angular Development Server

Source: https://github.com/tanstack/form/blob/main/examples/angular/array/README.md

Starts a development server for the Angular application, accessible via http://localhost:4200/. The application reloads automatically on file changes.

```bash
ng serve
```

--------------------------------

### Basic FormGroup Usage in Svelte

Source: https://github.com/tanstack/form/blob/main/docs/framework/svelte/guides/form-groups.md

Demonstrates the fundamental setup of a FormGroup component within a Svelte application using createForm.

```svelte
<script lang="ts">
  import { createForm } from '@tanstack/svelte-form'

  const form = createForm(() => ({
    defaultValues: {
      step1: {
        name: '',
      },
      step2: {
        age: 0,
      },
    },
  }))
</script>

<form.FormGroup name="step1">
  {#snippet children(group)}
    <!-- `group` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue` -->
    <!-- ... -->
  {/snippet}
</form.FormGroup>
```

--------------------------------

### onMount

Source: https://github.com/tanstack/form/blob/main/docs/reference/interfaces/FieldValidators.md

An optional function that runs on the mount event of an input. It can be used for initial validation or setup.

```APIDOC
## onMount

### Description
An optional function that runs on the mount event of an input. This can be used for initial validation or setup tasks.

### Parameters
#### Request Body
- **onMount** (RejectPromiseValidator<TOnMount>) - Optional - The function to execute on mount.
```

--------------------------------

### Selecting State with useStore

Source: https://github.com/tanstack/form/blob/main/docs/framework/preact/reference/variables/useStore.md

Example of how to use the useStore hook to select a piece of state from a store. Remember to use useSelector instead as useStore is deprecated.

```tsx
const count = useStore(counterStore, (state) => state.count)
```

--------------------------------

### Commit Message Example: Revert

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Format for reverting a previous commit, including the hash of the reverted commit.

```text
revert: <header of the reverted commit>

This reverts commit <hash>.
```

--------------------------------

### Vue Form Group Basic Usage

Source: https://github.com/tanstack/form/blob/main/docs/framework/vue/guides/form-groups.md

Demonstrates the basic setup of a form group using `useForm` and referencing the `FormGroup` component. This is useful for organizing parts of a larger form.

```vue
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'

const form = useForm({
  defaultValues: {
    step1: {
      name: '',
    },
    step2: {
      age: 0,
    },
  },
})
</script>

<template>
  <form.FormGroup name="step1" v-slot="{ group: formGroup }">
    <!-- `formGroup` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue` -->
    <!-- ... -->
  </form.FormGroup>
</template>
```

--------------------------------

### TanStackFormController with Schema Validation

Source: https://github.com/tanstack/form/blob/main/docs/framework/lit/guides/form-groups.md

Example of setting up `TanStackFormController` with schema validation logic. Note that `onDynamic` on the controller itself does not run `onChange` when a sub-form is submitted.

```typescript
#form = new TanStackFormController(this, {
  validationLogic: revalidateLogic(),
  validators: {
    // This validator will not run `onChange` when a sub-form is submitted;
    // it will only run `onChange` when the form itself is submitted.
    onDynamic: schema,
  },
})
```

--------------------------------

### Reset Expo Project to Blank State

Source: https://github.com/tanstack/form/blob/main/examples/react/expo/README.md

Run this command to move the initial starter code to an 'app-example' directory and create a new, empty 'app' directory for fresh development.

```bash
npm run reset-project
```

--------------------------------

### Start Expo Development Server

Source: https://github.com/tanstack/form/blob/main/examples/react/expo/README.md

Execute this command to launch the Expo development server, providing options to open the app in various environments like development builds, emulators, or Expo Go.

```bash
npx expo start
```

--------------------------------

### Build for Production

Source: https://github.com/tanstack/form/blob/main/examples/solid/multi-step-wizard/README.md

Builds the application for production, optimizing it for performance and deploying to the 'dist' folder.

```bash
npm run build
```

--------------------------------

### Using injectWithForm with Form Options

Source: https://github.com/tanstack/form/blob/main/docs/framework/angular/reference/functions/injectWithForm.md

Example of how to use injectWithForm in an Angular component to get a typed form instance. The form options are used for type inference and are not read at runtime.

```typescript
const withForm = injectWithForm({ ...peopleFormOpts })
withForm.form // FormApi<PeopleFormData, ...>
```

--------------------------------

### Setup onDynamic Validation with revalidateLogic

Source: https://github.com/tanstack/form/blob/main/docs/framework/react/guides/dynamic-validation.md

Initialize a form with dynamic validation using the `onDynamic` validator function. The `revalidateLogic()` must be passed to the `validationLogic` option to enable `onDynamic` validation. This example validates that a firstName field is not empty.

```typescript
import { revalidateLogic, useForm } from '@tanstack/react-form'

const form = useForm({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  validationLogic: revalidateLogic(),
  validators: {
    onDynamic: ({ value }) => {
      if (!value.firstName) {
        return { firstName: 'A first name is required' }
      }
      return undefined
    },
  },
})
```

--------------------------------

### Initialize TanStack Lit Form Controller Using Predefined Options

Source: https://github.com/tanstack/form/blob/main/docs/framework/lit/guides/basic-concepts.md

This example illustrates how to instantiate a `TanStackFormController` by spreading previously defined `formOpts`. This approach promotes reusability and cleaner code when managing multiple forms with similar configurations, leveraging the shared options.

```tsx
#form = new TanStackFormController(this, {
  ...formOpts,
})
```

--------------------------------

### Build All Packages

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Builds all packages within the project.

```bash
pnpm build:all
```

--------------------------------

### Get Field Value

Source: https://github.com/tanstack/form/blob/main/docs/reference/classes/FieldApi.md

Gets the current value of the field. Use `field.state.value` instead.

```typescript
getValue(): TData;
```

--------------------------------

### Create a Directory for Repos

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Creates a new directory named 'tanstack' to house related project repositories.

```bash
mkdir tanstack
```

--------------------------------

### Build Application for Production with npm

Source: https://github.com/tanstack/form/blob/main/examples/solid/standard-schema/README.md

Bundles and optimizes the Solid application for production deployment into the dist folder. The build process minifies code, includes content hashes in filenames for cache busting, and optimizes performance for production environments.

```bash
npm run build
```

--------------------------------

### Commit Message Example: Fix

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Example of a commit message for a bug fix, specifying the scope and subject.

```text
fix(pencil): stop graphite breaking when too much pressure applied
```

--------------------------------

### Basic Array Field Setup with SolidJS Index

Source: https://github.com/tanstack/form/blob/main/docs/framework/solid/guides/arrays.md

Initializes a form field as an array and demonstrates the required `Index` component from `solid-js` for rendering array items. Using `Index` is crucial to prevent re-rendering issues that can lead to data loss when the array changes.

```jsx
function App() {
  const form = createForm(() => ({
    defaultValues: {
      people: [],
    },
  }))

  return (
    <form.Field name="people" mode="array">
      {(field) => (
        <Show when={field().state.value.length > 0}>
          {/* Do not change this to `For` or things will not work as-expected */}
          <Index each={field().state.value}>
            {
              (_, i) => null // ...
            }
          </Index>
        </Show>
      )}
    </form.Field>
  )
}
```

--------------------------------

### Commit Message Example: Breaking Change

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Example of a commit message detailing a performance improvement that includes a breaking change.

```text
perf(pencil): remove `graphiteWidth` option

BREAKING CHANGE: The `graphiteWidth` option has been removed.
The default graphite width of 10mm is always used for performance reasons.
```

--------------------------------

### Handle TanStack Form Field Blur Event with onChange Validation (TSX)

Source: https://github.com/tanstack/form/blob/main/docs/framework/solid/guides/validation.md

This example demonstrates how to integrate the `onBlur` event handler for a TanStack Form field, allowing the form to track when the field loses focus. While the primary validation logic remains tied to the `onChange` event (checking age < 13), the `onBlur={field().handleBlur}` prop on the input ensures the form's internal state is updated when the field is blurred. This setup is a prerequisite for implementing `onBlur` specific validation rules.

```tsx
<form.Field
  name="age"
  validators={{
    onChange: ({ value }) =>
      value < 13 ? 'You must be 13 to make an account' : undefined,
  }}
>
  {(field) => (
    <>
      <label for={field().name}>Age:</label>
      <input
        id={field().name}
        name={field().name}
        value={field().state.value}
        type="number"
        // Listen to the onBlur event on the field
        onBlur={field().handleBlur}
        // We always need to implement onInput, so that TanStack Form receives the changes
        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
      />
      {!field().state.meta.isValid ? (
        <em role="alert">{field().state.meta.errors.join(', ')}</em>
      ) : null}
    </>
  )}
</form.Field>
```

--------------------------------

### Install TanStack Devtools and Form Plugin with npm

Source: https://github.com/tanstack/form/blob/main/docs/framework/react/guides/devtools.md

This command installs the necessary TanStack Devtools library and the TanStack Form plugin for React applications using npm. These packages are required to enable devtools functionality for your forms.

```bash
npm i @tanstack/react-devtools
npm i @tanstack/react-form-devtools
```

--------------------------------

### Build Application for Production with npm

Source: https://github.com/tanstack/form/blob/main/examples/solid/devtools/README.md

Compiles and bundles the application for production deployment to the dist folder. Optimizes Solid.js code, minifies output, and includes content hashes in filenames for cache busting. The resulting build is ready for deployment.

```bash
npm run build
```

--------------------------------

### Fetch Async Initial Values with TanStack Query and Vue Form

Source: https://github.com/tanstack/form/blob/main/docs/framework/vue/guides/async-initial-values.md

This example demonstrates how to use useQuery to fetch data and useForm to initialize form values once the data is available. It includes a loading state check and uses reactive computed properties to map query data to form defaults.

```vue
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import { useQuery } from '@tanstack/vue-query'
import { watchEffect, reactive, computed } from 'vue'

const { data, isLoading } = useQuery({
  queryKey: ['data'],
  queryFn: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return { firstName: 'FirstName', lastName: 'LastName' }
  },
})

const firstName = computed(() => data.value?.firstName || '')
const lastName = computed(() => data.value?.lastName || '')

const defaultValues = reactive({
  firstName,
  lastName,
})

const form = useForm({
  defaultValues,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
</script>

<template>
  <p v-if="isLoading">Loading..</p>
  <form v-else @submit.prevent.stop="form.handleSubmit">
    <!-- ... -->
  </form>
</template>
```

--------------------------------

### Initialize Vue Form with TanStack Form

Source: https://github.com/tanstack/form/blob/main/docs/overview.md

Sets up a form instance using the useForm composable with default values and an onSubmit handler. Demonstrates basic form configuration and async validation function for the firstName field with error checking.

```vue
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import FieldInfo from './FieldInfo.vue'

const form = useForm({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  onSubmit: async ({ value }) => {
    // Do something with form data
    alert(JSON.stringify(value))
  },
})

async function onChangeFirstName({ value }: { value: string }) {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return value.includes(`error`) && `No 'error' allowed in first name`
}
</script>
```

--------------------------------

### Get Form State

Source: https://github.com/tanstack/form/blob/main/docs/reference/classes/FormGroupApi.md

Retrieves the current state of the form group.

```typescript
get state(): FormGroupStoreState<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync>;
```

--------------------------------

### Get Field Meta

Source: https://github.com/tanstack/form/blob/main/docs/reference/classes/FieldApi.md

Retrieves the metadata associated with a field. This is an internal implementation detail.

```typescript
FieldLikeAPI.getMeta
```

--------------------------------

### validateArrayFieldsStartingFrom()

Source: https://github.com/tanstack/form/blob/main/docs/reference/classes/FormGroupApi.md

Validates array fields starting from a specific index within a given field.

```APIDOC
## validateArrayFieldsStartingFrom<TField>()

### Description
Validates array fields starting from a specific index within a given field.

### Method
`validateArrayFieldsStartingFrom<TField>(field: TField, index: number, cause: ValidationCause): Promise<unknown[]>`

### Type Parameters
#### TField
- `TField` extends `string`

### Parameters
#### Parameters
- **field** (TField) - The field to validate.
- **index** (number) - The starting index for validation.
- **cause** (ValidationCause) - The cause of the validation.

### Returns
`Promise<unknown[]>` - A promise that resolves to an array of validation results.
```

--------------------------------

### Fetch and populate form with async initial values using TanStack Query

Source: https://github.com/tanstack/form/blob/main/docs/framework/preact/guides/async-initial-values.md

Combines useQuery to fetch data from an API with useForm to initialize form fields. Shows a loading state while data is being fetched, then renders the form with fetched data as default values.

```tsx
import { useForm } from '@tanstack/preact-form'
import { useQuery } from '@tanstack/react-query'

export default function App() {
  const {data, isLoading} = useQuery({
    queryKey: ['data'],
    queryFn: async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      return {firstName: 'FirstName', lastName: "LastName"}
    }
  })

  const form = useForm({
    defaultValues: {
      firstName: data?.firstName ?? '',
      lastName: data?.lastName ?? '',
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value)
    },
  })

  if (isLoading) return <p>Loading...</p>

  return (
    // ...
  )
}
```

--------------------------------

### useTypedAppFormContext()

Source: https://github.com/tanstack/form/blob/main/docs/framework/react/reference/functions/createFormHook.md

Gets a typed form from the <form.AppForm /> context. It is recommended to use withForm whenever possible.

```APIDOC
## useTypedAppFormContext()

### Description
Gets a typed form from the <form.AppForm /> context. It is recommended to use withForm whenever possible.

### Parameters
#### Type Parameters
- **TFormData** (type) - Description: `TFormData`
- **TOnMount** (type) - Description: `TOnMount` extends `FormValidateOrFn<TFormData> | undefined`
- **TOnChange** (type) - Description: `TOnChange` extends `FormValidateOrFn<TFormData> | undefined`
- **TOnChangeAsync** (type) - Description: `TOnChangeAsync` extends `FormAsyncValidateOrFn<TFormData> | undefined`
- **TOnBlur** (type) - Description: `TOnBlur` extends `FormValidateOrFn<TFormData> | undefined`
- **TOnBlurAsync** (type) - Description: `TOnBlurAsync` extends `FormAsyncValidateOrFn<TFormData> | undefined`
- **TOnSubmit** (type) - Description: `TOnSubmit` extends `FormValidateOrFn<TFormData> | undefined`
- **TOnSubmitAsync** (type) - Description: `TOnSubmitAsync` extends `FormAsyncValidateOrFn<TFormData> | undefined`
- **TOnDynamic** (type) - Description: `TOnDynamic` extends `FormValidateOrFn<TFormData> | undefined`
- **TOnDynamicAsync** (type) - Description: `TOnDynamicAsync` extends `FormAsyncValidateOrFn<TFormData> | undefined`
- **TOnServer** (type) - Description: `TOnServer` extends `FormAsyncValidateOrFn<TFormData> | undefined`
- **TSubmitMeta** (type) - Description: `TSubmitMeta`

#### Function Parameters
- **_props** (FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) - Description: `FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>`

### Returns
`AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents & TNewField & TNewField, TFormComponents & TNewForm & TNewForm>`
```

--------------------------------

### createForm

Source: https://github.com/tanstack/form/blob/main/docs/framework/solid/reference/index.md

Initializes a new form instance with specified options, serving as the root for form management.

```APIDOC
## createForm

### Description
Initializes a new form instance with specified options, serving as the root for form management.

### Function Signature
`createForm<TFormValues>(options: CreateFormOptions<TFormValues>): SolidFormExtendedApi<TFormValues>
`

### Parameters
`options` (CreateFormOptions) - Required - Configuration options for the form.

### Request Example
```javascript
import { createForm } from '@tanstack/solid-form';

const formOptions = {
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  onSubmit: async (values) => {
    console.log('Form submitted:', values);
  },
};

const form = createForm(formOptions);
```

### Response
#### Success Response
Returns a `SolidFormExtendedApi` object that provides comprehensive form control.

#### Response Example
```json
{
  "values": { ... },
  "errors": { ... },
  "touched": { ... },
  "handleSubmit": "function",
  "resetForm": "function"
}
```
```

--------------------------------

### useTypedAppFormContext()

Source: https://github.com/tanstack/form/blob/main/docs/framework/react/reference/functions/createFormHook.md

Gets a typed form from the <form.AppForm /> context. It is recommended to use `withForm` whenever possible.

```APIDOC
## useTypedAppFormContext()

### Description
Gets a typed form from the <form.AppForm /> context. It is recommended to use `withForm` whenever possible.

### Type Parameters
- **TFormData**
- **TOnMount**
- **TOnChange**
- **TOnChangeAsync**
- **TOnBlur**
- **TOnBlurAsync**
- **TOnSubmit**
- **TOnSubmitAsync**
- **TOnDynamic**
- **TOnDynamicAsync**
- **TOnServer**
- **TSubmitMeta**

### Parameters
- **_props** (FormOptions) - Configuration options for the form.

### Returns
(AppFieldExtendedReactFormApi) - The extended React form API.
```

--------------------------------

### Prepare pnpm with Corepack

Source: https://github.com/tanstack/form/blob/main/CONTRIBUTING.md

Enables and prepares pnpm using Corepack, ensuring the correct version is used.

```bash
corepack enable && corepack prepare
```

--------------------------------

### Get Form ID Signature

Source: https://github.com/tanstack/form/blob/main/docs/reference/classes/FormApi.md

The 'formId' getter returns a string representing the unique identifier of the form.

```typescript
get formId(): string;
```

--------------------------------

### TanStackFormController Constructor

Source: https://github.com/tanstack/form/blob/main/docs/framework/lit/reference/classes/TanStackFormController.md

Initializes a new instance of the TanStackFormController. It takes the host element and optional form configuration as arguments.

```APIDOC
## Constructor

### Signature

```ts
new TanStackFormController<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>(host: ReactiveControllerHost, config?: FormOptions<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>): TanStackFormController<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
```

### Parameters

- **host** (ReactiveControllerHost) - The host element that the controller is attached to.
- **config?** (FormOptions) - Optional configuration object for the form controller.
```

--------------------------------

### Initialize form instance with useForm hook

Source: https://github.com/tanstack/form/blob/main/docs/framework/preact/guides/basic-concepts.md

Create a form instance using useForm with formOptions and an onSubmit handler. The onSubmit function receives the form value when submitted.

```tsx
const form = useForm({
  ...formOpts,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
```

```tsx
interface User {
  firstName: string
  lastName: string
  hobbies: Array<string>
}
const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }

const form = useForm({
  defaultValues: defaultUser,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
```

--------------------------------

### getFieldMeta

Source: https://github.com/tanstack/form/blob/main/docs/reference/classes/FieldGroupApi.md

Gets the metadata of the specified field. This includes information like validation status, touched state, and more.

```APIDOC
## getFieldMeta

### Description
Gets the metadata of the specified field.

### Method
Not applicable (TypeScript method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **field** (TField) - The name or path of the field to get metadata for.

### Returns
- **AnyFieldLikeMeta | undefined** - The metadata for the field, or undefined if the field does not exist.
```

--------------------------------

### Get Form State Signature

Source: https://github.com/tanstack/form/blob/main/docs/reference/classes/FormApi.md

The 'state' getter returns the current state of the form, conforming to the FormState type.

```typescript
get state(): FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>;
```

--------------------------------

### Build Angular Project

Source: https://github.com/tanstack/form/blob/main/examples/angular/array/README.md

Compiles the Angular project for deployment, storing the build artifacts in the `dist/` directory.

```bash
ng build
```

--------------------------------

### Get API Accessor

Source: https://github.com/tanstack/form/blob/main/docs/framework/angular/reference/classes/TanStackField.md

Returns the FieldApi instance for the current field, providing access to field-level operations and state.

```typescript
get api(): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;

```

--------------------------------

### Form State Subscription with useStore and Subscribe in Solid Form

Source: https://github.com/tanstack/form/blob/main/docs/framework/solid/guides/basic-concepts.md

Demonstrates reactive form state management using both the useStore hook for individual state selectors and the Subscribe component for multiple state properties. The example shows how to subscribe to form values and submission state to conditionally disable a submit button and display loading state, optimizing re-renders by only updating when selected state changes.

```tsx
const firstName = form.useStore((state) => state.values.firstName)
//...
<form.Subscribe
  selector={(state) => ({
    canSubmit: state.canSubmit,
    isSubmitting: state.isSubmitting,
  })}
  children={(state) => (
    <button type="submit" disabled={!state().canSubmit}>
      {state().isSubmitting ? '...' : 'Submit'}
    </button>
  )}
/>
```

--------------------------------

### validateArrayFieldsStartingFrom Method

Source: https://github.com/tanstack/form/blob/main/docs/reference/classes/FieldGroupApi.md

Validates children of an array field starting from a specific index. Use this for partial array validation.

```typescript
validateArrayFieldsStartingFrom<TField>(
   field,
   index,
cause): Promise<unknown[]>;

```