# TanStack Form — Headless Type-Safe Form State Management

> A performant, headless form state management library for TypeScript and JavaScript with first-class support for React, Vue, Angular, Solid, and Lit.

## Install

Save as a script file and run:

# TanStack Form — Headless Type-Safe Form State Management

## Quick Use
```bash
npm install @tanstack/react-form
```
```tsx
import { useForm } from '@tanstack/react-form';
const form = useForm({ defaultValues: { name: '' }, onSubmit: ({ value }) => console.log(value) });
```

## Introduction
TanStack Form is a headless, type-safe form management library designed for complex forms that need fine-grained reactivity and validation. It avoids re-rendering entire forms on every keystroke by tracking field-level state independently.

## What TanStack Form Does
- Manages form and field state with granular subscriptions to avoid unnecessary re-renders
- Validates fields synchronously, asynchronously, or on specific events (blur, change, submit)
- Integrates with schema validation libraries like Zod, Yup, and Valibot
- Supports arrays and nested object fields with add, remove, and reorder operations
- Works across React, Vue, Angular, Solid, and Lit with dedicated adapters

## Architecture Overview
The core is a framework-agnostic form store that tracks values, errors, touched state, and submission status per field. Each framework adapter wraps this store with hooks or composables that subscribe to individual field slices, so only the affected field component re-renders on change. Validation runs through a pluggable adapter layer that supports any schema library.

## Self-Hosting & Configuration
- Install the adapter for your framework: `@tanstack/react-form`, `@tanstack/vue-form`, etc.
- Create a form instance with `useForm()` passing default values and an `onSubmit` handler
- Use `form.Field` to bind individual fields with built-in state and validation
- Add validators at the field or form level, sync or async
- Integrate Zod or Valibot schemas via the `@tanstack/zod-form-adapter` package

## Key Features
- Field-level reactivity prevents whole-form re-renders on single field changes
- First-class TypeScript support with inferred types from default values
- Built-in array field helpers for dynamic lists
- Pluggable validation with adapters for Zod, Yup, and Valibot
- SSR-compatible with server-side validation support

## Comparison with Similar Tools
- **React Hook Form** — React-only with ref-based performance; TanStack Form is multi-framework and subscription-based
- **Formik** — mature React form library; TanStack Form is newer with better TypeScript inference
- **VeeValidate** — Vue-specific validation; TanStack Form covers Vue and four other frameworks
- **Modular Forms** — SolidJS-focused; TanStack Form supports Solid plus React, Vue, Angular, and Lit
- **Final Form** — framework-agnostic but less actively maintained; TanStack Form is under active development

## FAQ
**Q: How does it prevent re-renders?**
A: Each field subscribes to its own state slice, so changes in one field do not trigger re-renders in others.

**Q: Can I validate with Zod?**
A: Yes. Install `@tanstack/zod-form-adapter` and pass your Zod schema as a validator.

**Q: Does it support dynamic field arrays?**
A: Yes. Use `form.Field` with array helpers to push, remove, swap, and move items.

**Q: Is it production-ready?**
A: It is actively maintained by the TanStack team and used in production projects, though it is still evolving.

## Sources
- https://github.com/TanStack/form
- https://tanstack.com/form

---
Source: https://tokrepo.com/en/workflows/asset-44d78f27
Author: Script Depot