mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-08 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>
55 lines
1.3 KiB
Markdown
55 lines
1.3 KiB
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.
|
|
|
|
```tsx
|
|
import { createForm } from '@tanstack/solid-form'
|
|
|
|
function App() {
|
|
const form = createForm(() => ({
|
|
defaultValues: {
|
|
fullName: '',
|
|
},
|
|
onSubmit: async (values) => {
|
|
// Do something with form data
|
|
console.log(values)
|
|
},
|
|
}))
|
|
|
|
return (
|
|
<div>
|
|
<h1>Simple Form Example</h1>
|
|
<form.Provider>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
void form.handleSubmit()
|
|
}}
|
|
>
|
|
<div>
|
|
<form.Field
|
|
name="fullName"
|
|
children={(field) => (
|
|
<input
|
|
name={field().name}
|
|
value={field().state.value}
|
|
onBlur={field().handleBlur}
|
|
onInput={(e) => field().handleChange(e.target.value)}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</form.Provider>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
From here, you'll be ready to explore all of the other features of TanStack Form!
|