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 { createForm } from '@tanstack/solid-form'
function App() {
const form = createForm(() => ({
defaultValues: {
fullName: '',
},
onSubmit: async ({ value }) => {
// Do something with form data
console.log(value)
},
}))
return (
<div>
<h1>Simple Form Example</h1>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
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>
</div>
)
}
import { createForm } from '@tanstack/solid-form'
function App() {
const form = createForm(() => ({
defaultValues: {
fullName: '',
},
onSubmit: async ({ value }) => {
// Do something with form data
console.log(value)
},
}))
return (
<div>
<h1>Simple Form Example</h1>
<form
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
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>
</div>
)
}
From here, you'll be ready to explore all of the other features of TanStack Form!
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.