TanStack Form

TanStack Form is a headless library for managing complex form state — fields, validation, submission, and nested/array data — with full control over rendering and no bundled UI. It ships framework adapters for React, Vue, Solid, Angular, Lit, Svelte, and Preact on top of a shared, framework-agnostic core (@tanstack/form-core).

It is built TypeScript-first, inferring field types end-to-end so validation errors and field values stay in sync with your data shape. Validation can be synchronous or asynchronous, debounced, and driven by schema libraries like Zod or Yup via a standard schema adapter, making it a drop-in fit for teams that already validate data elsewhere in their stack.

What You Get

• A framework-agnostic core (@tanstack/form-core) with adapters for React, Vue, Solid, Angular, Lit, Svelte, and Preact
• End-to-end TypeScript inference so field values and validation errors stay type-safe without manual typing
• Synchronous and asynchronous field/form validation with built-in debouncing
• Standard Schema support for validating with Zod, Yup, or other schema libraries out of the box
• Support for deeply nested and array fields with fine-grained subscriptions to avoid unnecessary re-renders
• A devtools package (@tanstack/react-form-devtools) for inspecting form and field state during development

Common Use Cases

• Building multi-step or wizard-style forms with per-step and cross-step validation
• Managing dynamic, array-based form fields (e.g. adding/removing line items) with type safety
• Validating form input against an existing Zod or Yup schema shared with backend validation
• Building fully custom form UI where existing form libraries’ bundled components don’t fit the design system
• Sharing form logic across a React web app and a Vue or Solid app via the common form-core

Under The Hood

Architecture - The monorepo’s packages/form-core/src/ (FormApi.ts, FieldApi.ts, ValidationLogic.ts) implements a headless, framework-agnostic state machine for form and field lifecycle, validation timing, and subscriptions. Framework packages such as packages/react-form/src/ (useForm.tsx, useField.tsx, createFormHook.tsx) are thin adapters that subscribe React components to slices of that core state, re-rendering only the fields that actually changed. FieldGroupApi.ts/FormGroupApi.ts extend the model to support composing reusable groups of fields across forms.

Tech Stack - Written entirely in TypeScript, managed as a pnpm-based monorepo with per-framework packages (react-form, vue-form, solid-form, angular-form, lit-form, svelte-form, preact-form) each depending on the shared form-core. Builds with Vite, tests with Vitest, and validates published output with publint. Validation integrates with the Standard Schema spec, making it compatible with Zod, Yup, and other schema libraries without a hard dependency on any one of them.

Code Quality - The react-form package alone has around 10 dedicated test files exercising hooks, field groups, and form submission flows under Vitest, and the project runs test:types against multiple pinned TypeScript versions (5.4 through 5.9) to catch type-inference regressions across the range of versions users might have installed. ESLint enforces style across src and tests.

API Design - The API surface is intentionally small and consistent across frameworks — useForm()/useField() in React and analogous hooks elsewhere — so switching between the reactive primitives of different frameworks requires learning the same core concepts once. Because the library is headless, initial setup requires wiring up your own field components, which is more boilerplate up front than fully-styled form libraries but pays off in design-system flexibility.