# 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 Svelte framework adapter:

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

<!-- ::start:tabs variant="files" -->

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

  const form = createForm(() => ({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    onSubmit: async ({ value }) => {
      console.log(value)
    },
  }))
</script>

<div>
  <h1>Simple Form Example</h1>
  <form
    onsubmit={(event) => {
      event.preventDefault()
      event.stopPropagation()
      form.handleSubmit()
    }}
  >
    <div>
      <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'
              )
            },
            triggers: ['change'],
            triggerDebounceMs: 500,
          },
        ]}
      >
        {#snippet children(field)}
          <label for={field.name}>First Name:</label>
          <input
            id={field.name}
            name={field.name}
            value={field.value}
            onblur={field.handleBlur}
            oninput={(event) => field.handleChange(event.currentTarget.value)}
            aria-invalid={field.meta.isInvalid}
          />
          <FieldInfo {field} />
        {/snippet}
      </form.Field>
    </div>
    <div>
      <form.Field name="lastName">
        {#snippet children(field)}
          <label for={field.name}>Last Name:</label>
          <input
            id={field.name}
            name={field.name}
            value={field.value}
            onblur={field.handleBlur}
            oninput={(event) => field.handleChange(event.currentTarget.value)}
            aria-invalid={field.meta.isInvalid}
          />
          <FieldInfo {field} />
        {/snippet}
      </form.Field>
    </div>
    <form.Subscribe
      selector={(state) => ({
        canSubmit: state.canSubmit,
        isSubmitting: state.isSubmitting,
      })}
    >
      {#snippet children({ canSubmit, isSubmitting })}
        <button type="submit" disabled={!canSubmit}>
          {isSubmitting ? '...' : 'Submit'}
        </button>
        <button
          type="reset"
          onclick={(event) => {
            event.preventDefault()
            form.reset()
          }}
        >
          Reset
        </button>
      {/snippet}
    </form.Subscribe>
  </form>
</div>
```

```svelte title="FieldInfo.svelte"
<script lang="ts">
  import type { AnyFieldApi } from '@tanstack/svelte-form'

  const { field }: { field: AnyFieldApi } = $props()
</script>

{#if field.meta.isTouched && field.meta.isInvalid}
  <em role="alert">
    {field.errors.map((error) => error.message).join(', ')}
  </em>
{/if}
{#if field.meta.isValidating}Validating...{/if}
```

<!-- ::end:tabs -->

> 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).