# Tanstack Form

Headless, performant, and type-safe form state management for TS/JS, React, Vue...

- Repository: https://github.com/Kiranism/next-shadcn-dashboard-starter (7212 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Kiranism/next-shadcn-dashboard-starter --skill tanstack-form -g -a claude-code -y`
Codex: `npx skills add Kiranism/next-shadcn-dashboard-starter --skill tanstack-form -g -a codex -y`
Cursor: `npx skills add Kiranism/next-shadcn-dashboard-starter --skill tanstack-form -g -a cursor -y`
Gemini CLI: `npx skills add Kiranism/next-shadcn-dashboard-starter --skill tanstack-form -g -a gemini-cli -y`

## Description

Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit, and Svelte.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

## Overview

TanStack Form is a headless form library with deep TypeScript integration. It provides field-level and form-level validation (sync/async), array fields, linked/dependent fields, fine-grained reactivity, and schema validation adapter support (Zod, Valibot, Yup).

**Package:** `@tanstack/react-form`
**Adapters:** `@tanstack/zod-form-adapter`, `@tanstack/valibot-form-adapter`
**Status:** Stable (v1)

## Installation

```bash
npm install @tanstack/react-form
# Optional schema adapters:
npm install @tanstack/zod-form-adapter zod
npm install @tanstack/valibot-form-adapter valibot
```

## Core: useForm

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

function MyForm() {
  const form = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      email: '',
      age: 0
    },
    onSubmit: async ({ value }) => {
      // value is fully typed
      await submitToServer(value);
    },
    onSubmitInvalid: ({ value, formApi }) => {
      console.log('Validation failed:', formApi.state.errors);
    }
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      {/* Fields */}
      <form.Subscribe
        selector={(state) => ({ canSubmit: state.canSubmit, isSubmitting: state.isSubmitting })}
        children={({ canSubmit, isSubmitting }) => (
          <button type='submit' disabled={!canSubmit}>
            {isSubmitting ? 'Submitting...' : 'Submit'}
          </button>
        )}
      />
    </form>
  );
}
```

## Fields (form.Field)

The rest: https://github.com/Kiranism/next-shadcn-dashboard-starter/blob/HEAD/.agents/skills/tanstack-form/SKILL.md