diff --git a/docs/comparison.md b/docs/comparison.md index 16a065b20..6f0611d5c 100644 --- a/docs/comparison.md +++ b/docs/comparison.md @@ -12,23 +12,23 @@ Feature/Capability Key: - 🔶 Supported and documented, but requires extra user-code to implement - 🛑 Not officially supported or documented. -| Feature | TanStack Form | Formik | Redux Form | React Hook Form | Final Form | -| ------------------------------------------------- | -------------------------------------------- | ------------------------------ | -------------------------------------- | ------------------------------------------------ | -------------------------------------- | -| Github Repo / Stars | [![][stars-tanstack-form]][gh-tanstack-form] | [![][stars-formik]][gh-formik] | [![][stars-redux-form]][gh-redux-form] | [![][stars-react-hook-form]][gh-react-hook-form] | [![][stars-final-form]][gh-final-form] | -| Supported Frameworks | React, Vue, Angular, Solid, Lit | React | React | React | React, Vue, Angular, Solid, Vanilla JS | -| Bundle Size | [![][bp-tanstack-form]][bpl-tanstack-form] | [![][bp-formik]][bpl-formik] | [![][bp-redux-form]][bpl-redux-form] | [![][bp-react-hook-form]][bpl-react-hook-form] | [![][bp-final-form]][bpl-final-form] | -| First-class TypeScript support | ✅ | ❓ | ❓ | ✅ | ✅ | -| Fully Inferred TypeScript (Including Deep Fields) | ✅ | ❓ | ❓ | ✅ | 🛑 | -| Headless UI components | ✅ | ❓ | ❓ | ✅ | ❓ | -| Framework agnostic | ✅ | ❓ | ❓ | 🛑 | ✅ | -| Granular reactivity | ✅ | ❓ | ❓ | ❓ | ✅ | -| Nested object/array fields | ✅ | ✅ | ❓ | ✅\*(1) | ✅ | -| Async validation | ✅ | ✅ | ❓ | ✅ | ✅ | -| Built-in async validation debounce | ✅ | ❓ | ❓ | ❓ | ❓ | -| Schema-based Validation | ✅ | ✅ | ❓ | ✅ | ❓ | -| First Party Devtools | 🛑\*(2) | 🛑 | ✅\*(3) | ✅ | ❓ | -| SSR integrations | ✅ | 🛑 | 🛑 | 🛑 | 🛑 | -| React Compiler support | ✅ | ❓ | ❓ | 🛑 | ❓ | +| Feature | TanStack Form | Formik | Redux Form | React Hook Form | Final Form | Angular Forms | +| ------------------------------------------------- | -------------------------------------------- | ------------------------------ | -------------------------------------- | ------------------------------------------------ | -------------------------------------- | -------------------------------------------- | +| Github Repo / Stars | [![][stars-tanstack-form]][gh-tanstack-form] | [![][stars-formik]][gh-formik] | [![][stars-redux-form]][gh-redux-form] | [![][stars-react-hook-form]][gh-react-hook-form] | [![][stars-final-form]][gh-final-form] | [![][stars-angular-forms]][gh-angular-forms] | +| Supported Frameworks | React, Vue, Angular, Solid, Lit | React | React | React | React, Vue, Angular, Solid, Vanilla JS | Angular | +| Bundle Size | [![][bp-tanstack-form]][bpl-tanstack-form] | [![][bp-formik]][bpl-formik] | [![][bp-redux-form]][bpl-redux-form] | [![][bp-react-hook-form]][bpl-react-hook-form] | [![][bp-final-form]][bpl-final-form] | [![][bp-angular-forms]][bpl-angular-forms] | +| First-class TypeScript support | ✅ | ❓ | ❓ | ✅ | ✅ | ✅ | +| Fully Inferred TypeScript (Including Deep Fields) | ✅ | ❓ | ❓ | ✅ | 🛑 | 🔶 | +| Headless UI components | ✅ | ❓ | ❓ | ✅ | ❓ | ❓ | +| Framework agnostic | ✅ | ❓ | ❓ | 🛑 | ✅ | 🛑 | +| Granular reactivity | ✅ | ❓ | ❓ | ❓ | ✅ | ❓ | +| Nested object/array fields | ✅ | ✅ | ❓ | ✅\*(1) | ✅ | ✅ | +| Async validation | ✅ | ✅ | ❓ | ✅ | ✅ | ✅ | +| Built-in async validation debounce | ✅ | ❓ | ❓ | ❓ | ❓ | ❓ | +| Schema-based Validation | ✅ | ✅ | ❓ | ✅ | ❓ | ❓ | +| First Party Devtools | 🛑\*(2) | 🛑 | ✅\*(3) | ✅ | ❓ | ✅ | +| SSR integrations | ✅ | 🛑 | 🛑 | 🛑 | 🛑 | ✅ | +| React Compiler support | ✅ | ❓ | ❓ | 🛑 | ❓ | N/A | \*(1) For nested arrays, react-hook-form requires you [to cast the field array by its name](https://react-hook-form.com/docs/usefieldarray) if you're using TypeScript @@ -56,3 +56,7 @@ Feature/Capability Key: [bp-final-form]: https://badgen.net/bundlephobia/minzip/final-form?label=💾 [gh-final-form]: https://github.com/final-form/final-form [stars-final-form]: https://img.shields.io/github/stars/final-form/final-form?label=%F0%9F%8C%9F +[bpl-angular-forms]: https://bundlephobia.com/result?p=@angular/forms +[bp-angular-forms]: https://badgen.net/bundlephobia/minzip/@angular/forms?label=💾 +[gh-angular-forms]: https://github.com/angular/angular/tree/main/packages/forms +[stars-angular-forms]: https://img.shields.io/github/stars/angular/angular?label=%F0%9F%8C%9F