@tanstack/react-form

Type-safe, headless form state management for React — first-class TypeScript inference, async validation, and framework-agnostic core.

@tanstack/react-form

React

Type-safe, headless form state management for React — first-class TypeScript inference, async validation, and framework-agnostic core.

npm GitHub Docs

Fit

Bundle (gzip)

17.8 kB

71.9 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Form libraries often sacrifice type safety for convenience, leaving you with any-typed field values. Async validation, field arrays, and cross-field dependencies require complex workarounds.

What It Does

TanStack Form infers TypeScript types directly from your form schema, so field values, errors, and submit handlers are all fully typed. It supports synchronous and async validation, field-level and form-level validators, and integrates with any schema library.

Installation

bash

npm install @tanstack/react-form

Usage Example

tsx

import { useForm } from '@tanstack/react-form';

export function SignupForm() {
  const form = useForm({
    defaultValues: { email: '', age: 0 },
    onSubmit: async ({ value }) => {
      console.log(value); // fully typed
    },
  });

  return (
    <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>
      <form.Field
        name="email"
        validators={{ onChange: ({ value }) => !value.includes('@') ? 'Invalid email' : undefined }}
        children={(field) => (
          <input value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.