# Overview

TanStack Form is the ultimate solution for handling forms in web applications, providing a powerful and flexible approach to form management. Designed with first-class TypeScript support, headless UI components, and a framework-agnostic design, it streamlines form handling and ensures a seamless experience across various front-end frameworks.

## Motivation

Most web frameworks do not offer a comprehensive solution for form handling, leaving developers to create their own custom implementations or rely on less-capable libraries. This often results in a lack of consistency, poor performance, and increased development time. TanStack Form aims to address these challenges by providing an all-in-one solution for managing forms that is both powerful and easy to use.

With TanStack Form, developers can tackle common form-related challenges such as:

- Reactive data binding and state management
- Complex validation and error handling
- Accessibility and responsive design
- Internationalization and localization
- Cross-platform compatibility and custom styling

By providing a complete solution for these challenges, TanStack Form empowers developers to build robust and user-friendly forms with ease.

## Enough talk, show me some code already!

In the example below, you can see TanStack Form in action with the Lit framework adapter:

[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/form/tree/alpha/examples/lit/simple)

```ts title="index.ts"
import { LitElement, html, nothing } from 'lit'
import { customElement } from 'lit/decorators.js'
import { TanStackFormController } from '@tanstack/lit-form'
import type { AnyFieldApi } from '@tanstack/lit-form'

function fieldInfo(field: AnyFieldApi) {
  return html`
    ${
      field.meta.isTouched && field.meta.isInvalid
        ? html`<em role="alert">
            ${field.errors.map((error) => error.message).join(', ')}
          </em>`
        : nothing
    }
    ${field.meta.isValidating ? 'Validating...' : nothing}
  `
}

@customElement('tanstack-form-demo')
export class TanStackFormDemo extends LitElement {
  private form = new TanStackFormController(this, {
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value)
    },
  })

  render() {
    return html`
      <form
        @submit=${(event: SubmitEvent) => {
          event.preventDefault()
          event.stopPropagation()
          void this.form.api.handleSubmit()
        }}
      >
        <div>
          ${this.form.field(
            {
              name: 'firstName',
              validators: [
                {
                  run: ({ value }) =>
                    !value
                      ? 'A first name is required'
                      : value.length < 3
                        ? 'First name must be at least 3 characters'
                        : undefined,
                  triggers: ['change'],
                },
                {
                  run: async ({ value }) => {
                    await new Promise((resolve) => setTimeout(resolve, 1000))
                    return value.includes('error')
                      ? 'No "error" allowed in first name'
                      : undefined
                  },
                  triggers: ['change'],
                  triggerDebounceMs: 500,
                },
              ],
            },
            (field) => html`
              <label for=${field.name}>First Name:</label>
              <input
                id=${field.name}
                name=${field.name}
                .value=${field.value}
                @blur=${() => field.handleBlur()}
                @input=${(event: InputEvent) =>
                  field.handleChange(
                    (event.currentTarget as HTMLInputElement).value,
                  )}
                aria-invalid=${field.meta.isInvalid ? 'true' : 'false'}
              />
              ${fieldInfo(field)}
            `,
          )}
        </div>
        <div>
          ${this.form.field(
            { name: 'lastName' },
            (field) => html`
              <label for=${field.name}>Last Name:</label>
              <input
                id=${field.name}
                name=${field.name}
                .value=${field.value}
                @blur=${() => field.handleBlur()}
                @input=${(event: InputEvent) =>
                  field.handleChange(
                    (event.currentTarget as HTMLInputElement).value,
                  )}
                aria-invalid=${field.meta.isInvalid ? 'true' : 'false'}
              />
              ${fieldInfo(field)}
            `,
          )}
        </div>
        ${this.form.subscribe(
          (state) => [state.canSubmit, state.isSubmitting] as const,
          ([canSubmit, isSubmitting]) => html`
            <button type="submit" ?disabled=${!canSubmit || isSubmitting}>
              ${isSubmitting ? '...' : 'Submit'}
            </button>
            <button
              type="reset"
              @click=${(event: Event) => {
                event.preventDefault()
                this.form.api.reset()
              }}
            >
              Reset
            </button>
          `,
        )}
      </form>
    `
  }
}
```

> Other framework adapters are coming soon and are already supported in the stable version of TanStack Form.

## You talked me into it, so what now?

- Learn TanStack Form at your own pace with our thorough [Walkthrough Guide](./installation) and [API Reference](./reference/interfaces/FormApi).