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

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

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

```vue title="App.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
    console.log(value)
  },
})

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

<template>
  <div>
    <h1>Simple Form Example</h1>
    <form @submit.prevent.stop="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: validateFirstName,
              triggers: ['change'],
              triggerDebounceMs: 500,
            },
          ]"
          v-slot="{ field }"
        >
          <label :for="field.name">First Name:</label>
          <input
            :id="field.name"
            :name="field.name"
            :value="field.value"
            :aria-invalid="field.meta.isInvalid"
            @blur="field.handleBlur"
            @input="
              field.handleChange(($event.target as HTMLInputElement).value)
            "
          />
          <FieldInfo :field="field" />
        </form.Field>
      </div>
      <div>
        <form.Field name="lastName" v-slot="{ field }">
          <label :for="field.name">Last Name:</label>
          <input
            :id="field.name"
            :name="field.name"
            :value="field.value"
            :aria-invalid="field.meta.isInvalid"
            @blur="field.handleBlur"
            @input="
              field.handleChange(($event.target as HTMLInputElement).value)
            "
          />
          <FieldInfo :field="field" />
        </form.Field>
      </div>
      <form.Subscribe
        :selector="(state) => [state.canSubmit, state.isSubmitting] as const"
        v-slot="[canSubmit, isSubmitting]"
      >
        <button type="submit" :disabled="!canSubmit || isSubmitting">
          {{ isSubmitting ? '...' : 'Submit' }}
        </button>
        <button type="reset" @click.prevent="form.reset()">Reset</button>
      </form.Subscribe>
    </form>
  </div>
</template>
```

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

defineProps<{ field: AnyFieldApi }>()
</script>

<template>
  <template v-if="field.meta.isTouched && field.meta.isInvalid">
    <em role="alert">
      {{ field.errors.map((error) => error.message).join(', ') }}
    </em>
  </template>
  <span v-if="field.meta.isValidating" aria-live="polite"> Validating... </span>
</template>
```

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