Chapter 1: Overview

Core Idea

TanStack Form is a headless, framework-agnostic form state management library: one core engine (@tanstack/form-core) with thin adapters for React, Vue, Angular, Solid, Lit, and Svelte, built around a subscription-based reactive store rather than framework-specific state primitives.

Key Concepts

• Headless: no bundled UI — you own every input element and every pixel of markup.
• Subscription-based state: a form instance holds a central store; components opt in to the slices they need instead of the whole form re-rendering on every keystroke.
• Multi-stage validation: sync validation on change, debounced async validation, and blur-time validation are all first-class, not bolted on.
• Type-safety by inference: field names and value types are inferred from defaultValues, not from generics you write by hand.

Code Examples

const form = useForm({
  defaultValues: { firstName: '', lastName: '' },
  onSubmit: async ({ value }) => {
    // handle submission
  },
})

• What it demonstrates: the shape every framework adapter converges on — a form instance created from defaultValues + onSubmit, with individual fields wired up separately (see ch006).

Mental Models

• Think of the form instance as a tiny store, not a component. Rendering is a consumer of that store, subscribed selectively — the same mental model as TanStack Query's cache, just for form state instead of server state.
• The framework adapter is a thin rendering shim. The validation engine, array-field mutation logic, and state machine all live in @tanstack/form-core; switching frameworks changes how you render a field, not how the form behaves.

Key Takeaways

1. Reach for TanStack Form when you need consistent form behavior across multiple frameworks, or when you specifically want a headless engine instead of a styled/opinionated form kit.
2. All UI is yours to build — there's no default <Input> component; see ch018 for wiring it into an existing component library.
3. The reactive-store model means correct usage requires deliberate subscriptions (ch014), not React's default "everything re-renders" assumption.

Connects To

• Ch003 Philosophy: the six design principles behind these choices.
• Ch006 React Quick Start: the smallest working example of this shape.
• Ch029 Framework Adapters: how the same core surfaces in Vue/Angular/Solid/Lit/Svelte.