Skip to main content
The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling… yet.

​
Installation

1

Install the package

Install @tanstack/vue-form using your package manager of choice:
npm install @tanstack/vue-form
2

Create your first form

Import useForm and create a basic form with the Composition API:
<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>
From here, you’ll be ready to explore all of the other features of TanStack Form!

​
Next Steps

Basic Concepts

Learn about form instances, fields, and field state

Validation

Add validation rules to your forms

Array Fields

Manage dynamic lists of form fields

Build docs developers (and LLMs) love

Get started for freeTalk to us