Files
form/docs/framework/vue/quick-start.md
Aadit Olkar 6050fea779 feat: solid.js form (#471)
* 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>
2023-10-30 00:17:49 -07:00

1017 B

id, title
id title
quick-start 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.

<!-- 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!