|
| 1 | +--- |
| 2 | +title: Announcing TanStack Form v1 |
| 3 | +published: 03/03/2025 |
| 4 | +authors: |
| 5 | + - Corbin Crutchley |
| 6 | +--- |
| 7 | + |
| 8 | + |
| 9 | + |
| 10 | +We're excited to announce the first stable version of [TanStack Form](/form/v1) is live and ready for usage in production! 🥳 |
| 11 | + |
| 12 | +We support five frameworks at launch: React, Vue, Angular, Solid, and Lit, as well as a myriad of features for each specific framework. |
| 13 | + |
| 14 | +# How to install |
| 15 | + |
| 16 | +```shell |
| 17 | +$ npm i @tanstack/react-form |
| 18 | +# or |
| 19 | +$ npm i @tanstack/vue-form |
| 20 | +# or |
| 21 | +$ npm i @tanstack/angular-form |
| 22 | +# or |
| 23 | +$ npm i @tanstack/solid-form |
| 24 | +# or |
| 25 | +$ npm i @tanstack/lit-form |
| 26 | +``` |
| 27 | + |
| 28 | +# A bit of history |
| 29 | + |
| 30 | +It was nearly two years ago when [I saw Tanner's BlueSky (an invite-only platform at the time) post announcing that he was working on a new project: TanStack Form](https://bsky.app/profile/tannerlinsley.com/post/3ju5z473w5525). |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +At the time, I had just launched an alternative form library for React called "[HouseForm](https://web.archive.org/web/20240101000000*/houseform.dev)" and I was immediately enamored by some of the ideas Tanner's library brought to the table. |
| 35 | + |
| 36 | +I was fortunate enough to attend a hackathon that Tanner was also going to soon after and we were able to get some time to work on integrating some APIs from HouseForm into the project. |
| 37 | + |
| 38 | +Since that time, Tanner's handed much of the reigns of Form over to me and a wonderful group of additional maintainers. |
| 39 | + |
| 40 | +So, what have we built in that time? |
| 41 | + |
| 42 | +# Features |
| 43 | + |
| 44 | +One of the advantages of being in the oven for so long is that TanStack Form launches with a flurry of features you can leverage day one. |
| 45 | + |
| 46 | +Let's go over _just a few_ of them using React's adapter as examples. |
| 47 | + |
| 48 | +## Extreme type safety |
| 49 | + |
| 50 | +Like many all of the TanStack projects, Form has revolutionized what it means to be a "type-safe" form library. |
| 51 | + |
| 52 | +```tsx |
| 53 | +const form = useForm({ |
| 54 | + defaultValues: { |
| 55 | + name: "", |
| 56 | + age: 0 |
| 57 | + } |
| 58 | +}); |
| 59 | + |
| 60 | +// TypeScript will correctly tell you that `firstName` is not a valid field |
| 61 | +<form.Field name="firstName"/> |
| 62 | + |
| 63 | +// TypeScript will correctly tell you that `name`'s type is a `string`, not a `number` |
| 64 | +<form.Field name="name" children={field => <NumberInput value={field.state.value}/>}/> |
| 65 | +``` |
| 66 | + |
| 67 | +We even support type-checking what errors are returned in `<form.Field>`: |
| 68 | + |
| 69 | +```tsx |
| 70 | +<form.Field |
| 71 | + name="age" |
| 72 | + validators={{ |
| 73 | + onChange: ({ value }) => (value < 12 ? { tooYoung: true } : undefined), |
| 74 | + }} |
| 75 | + children={(field) => ( |
| 76 | + <> |
| 77 | + <NumberInput value={field.state.value} /> |
| 78 | + // TypeScript will correctly tell you that `errorMap.onChange` // is an object, |
| 79 | + not a string |
| 80 | + <p>{field.state.meta.errorMap.onChange}</p> |
| 81 | + </> |
| 82 | + )} |
| 83 | +/> |
| 84 | +``` |
| 85 | + |
| 86 | +> Oh, yeah, we support field-based validation as well as form validation. Mix-n-match them! |
| 87 | +
|
| 88 | +The best part? [You won't need to pass any typescript generics to get this level of type safety](/form/latest/docs/philosophy#generics-are-grim). Everything is inferred from your runtime usage. |
| 89 | + |
| 90 | +## Schema validation |
| 91 | + |
| 92 | +Thanks to the awesome work by the creators of [Zod](http://zod.dev/), [Valibot](https://valibot.dev), and [ArkType](https://arktype.io/), we support [Standard Schema](https://github.com/standard-schema/standard-schema) out of the box; no other packages needed. |
| 93 | + |
| 94 | +```tsx |
| 95 | +const userSchema = z.object({ |
| 96 | + age: z.number().gte(13, 'You must be 13 to make an account'), |
| 97 | +}) |
| 98 | + |
| 99 | +function App() { |
| 100 | + const form = useForm({ |
| 101 | + defaultValues: { |
| 102 | + age: 0, |
| 103 | + }, |
| 104 | + validators: { |
| 105 | + onChange: userSchema, |
| 106 | + }, |
| 107 | + }) |
| 108 | + return ( |
| 109 | + <div> |
| 110 | + <form.Field |
| 111 | + name="age" |
| 112 | + children={(field) => { |
| 113 | + return <>{/* ... */}</> |
| 114 | + }} |
| 115 | + /> |
| 116 | + </div> |
| 117 | + ) |
| 118 | +} |
| 119 | +``` |
| 120 | + |
| 121 | +## Async validation |
| 122 | + |
| 123 | +That's not all, though! We also support async functions to validate your code; complete with built-in debouncing and [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)-based cancellation: |
| 124 | + |
| 125 | +```tsx |
| 126 | +<form.Field |
| 127 | + name="age" |
| 128 | + asyncDebounceMs={500} |
| 129 | + validators={{ |
| 130 | + onBlurAsync: async ({ value, signal }) => { |
| 131 | + const currentAge = await fetchCurrentAgeOnProfile({ signal }) |
| 132 | + return value < currentAge ? 'You can only increase the age' : undefined |
| 133 | + }, |
| 134 | + }} |
| 135 | +/> |
| 136 | +``` |
| 137 | + |
| 138 | +## Platform support |
| 139 | + |
| 140 | +Not only do we support multiple frameworks as we mentioned from the start; we support multiple runtimes. Whether you're using React Native, NativeScript, or even SSR solutions like Next.js or [TanStack Start](/start), we have you covered. |
| 141 | + |
| 142 | +In fact, if you're using SSR solutions, we even make server-side form validation a breeze: |
| 143 | + |
| 144 | +```typescript |
| 145 | +// app/routes/index.tsx, but can be extracted to any other path |
| 146 | +import { createServerValidate, getFormData } from '@tanstack/react-form/start' |
| 147 | +import { yourSchemaHere } from '~/constants/forms' |
| 148 | + |
| 149 | +const serverValidate = createServerValidate({ |
| 150 | + ...formOpts, |
| 151 | + onServerValidate: yourSchemaHere, |
| 152 | +}) |
| 153 | + |
| 154 | +export const getFormDataFromServer = createServerFn({ method: 'GET' }).handler( |
| 155 | + async () => { |
| 156 | + return getFormData() |
| 157 | + } |
| 158 | +) |
| 159 | +``` |
| 160 | + |
| 161 | +> This code sample excludes some of the relevant code to keep things glanceable. [For more details on our SSR integration, please check our docs.](/form/latest/docs/framework/react/guides/ssr) |
| 162 | +
|
| 163 | +And boom, the exact same validation logic is running on both your frontend and backend. Your forms will even show errors when JavaScript is disabled on the user's browser! |
| 164 | + |
| 165 | +# A look forward |
| 166 | + |
| 167 | +We're not resting on our laurels, however - we have plans to add new features to v1 now that we're stable. These features include: |
| 168 | + |
| 169 | +- [Persistence APIs](https://github.com/TanStack/form/pull/561) |
| 170 | +- [A Svelte 5 adapter](https://github.com/TanStack/form/issues/516) |
| 171 | +- [Better DX for transforming values on submission](https://github.com/TanStack/form/issues/418) |
| 172 | +- [Form Groups](https://github.com/TanStack/form/issues/419) |
| 173 | + |
| 174 | +And much more. |
| 175 | + |
| 176 | +# Thank **you** |
| 177 | + |
| 178 | +There's so many people I'd like to thank that once I'd gotten started I'd never end. Instead, I'll address each group of folks I want to thank. |
| 179 | + |
| 180 | +- Thank you to our contributors: So many people had to come together to make this happen. From maintainers of other TanStack projects giving us guidance, to drive-by PRs; it all helped us get across the line. |
| 181 | + |
| 182 | +- Thank you to our early adopters: The ones who took a risk on us and provided invaluable feedback on our APIs and functionality. |
| 183 | +- Thank you to the content creators who covered our tools: You brought more eyes to our project - making it better through education and feedback. |
| 184 | +- Thank you to the broader community: Your excitement to use our tools have driven the team immensely. |
| 185 | + |
| 186 | +And finally, thank **you** for taking the time to read and explore our newest tool. ❤️ |
0 commit comments