mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-06 04:19:43 +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>
1.4 KiB
1.4 KiB
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.
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!