mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-07 12:27:45 +00:00
6050fea779
* solid commit -a * fix failing tests and formatting * comments + removed unneeded computed * updated changes * prettierd * chore: add Solid Form to script to be deployed * fix: fix typing of solid's Subscribe data * chore: remove errant createEffect * chore: rename Solid's useForm and useField to createForm and createField * chore: remove old mention of React's memoization * chore: add Solid simple example * chore: add Solid yup example * chore: add Zod Solid example * docs: add initial docs for Solid package --------- Co-authored-by: Corbin Crutchley <git@crutchcorn.dev>
46 lines
1017 B
Markdown
46 lines
1017 B
Markdown
---
|
|
id: quick-start
|
|
title: Quick Start
|
|
---
|
|
|
|
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.
|
|
|
|
```vue
|
|
<!-- App.vue -->
|
|
<script setup>
|
|
import { useForm } from '@tanstack/vue-form'
|
|
|
|
const form = useForm({
|
|
defaultValues: {
|
|
fullName: '',
|
|
},
|
|
onSubmit: async (values) => {
|
|
// Do something with form data
|
|
console.log(values)
|
|
},
|
|
})
|
|
|
|
form.provideFormContext()
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div>
|
|
<form.Field name="fullName">
|
|
<template v-slot="{ field }">
|
|
<input
|
|
:name="field.name"
|
|
:value="field.state.value"
|
|
:onBlur="field.handleBlur"
|
|
:onChange="(e) => field.handleChange(e.target.value)"
|
|
/>
|
|
</template>
|
|
</form.Field>
|
|
</div>
|
|
<button type="submit">Submit</button>
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
From here, you'll be ready to explore all of the other features of TanStack Form!
|