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.
<!-- 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>
<!-- 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>
From here, you'll be ready to explore all of the other features of TanStack Form!
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.