mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-07 20:37:48 +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>
59 lines
1.4 KiB
Markdown
59 lines
1.4 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 React from 'react'
|
|
import ReactDOM from 'react-dom/client'
|
|
import { useForm } from '@tanstack/react-form'
|
|
|
|
export default function App() {
|
|
const form = useForm({
|
|
defaultValues: {
|
|
fullName: '',
|
|
},
|
|
onSubmit: async (values) => {
|
|
// Do something with form data
|
|
console.log(values)
|
|
},
|
|
})
|
|
|
|
return (
|
|
<div>
|
|
<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}
|
|
onChange={(e) => field.handleChange(e.target.value)}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</form.Provider>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const rootElement = document.getElementById('root')!
|
|
ReactDOM.createRoot(rootElement).render(<App />)
|
|
```
|
|
|
|
From here, you'll be ready to explore all of the other features of TanStack Form!
|