React Forms

TanStack Form v1 Core Features

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

1. fuse-ai-pilot:explore-codebase - Analyze existing form components and validation patterns
2. fuse-ai-pilot:research-expert - Verify latest TanStack Form v1 docs via Context7/Exa
3. mcp__context7__query-docs - Check Zod validation and React 19 Server Actions patterns

After implementation, run fuse-ai-pilot:sniper for validation.

MANDATORY: SOLID Principles

ALWAYS apply SOLID principles from solid-react skill.

→ See ../solid-react/SKILL.md for complete rules

Key Rules:

• Files < 100 lines (split at 90)
• Interfaces in modules/[feature]/src/interfaces/
• JSDoc mandatory on all exports
• No business logic in components

Core Hooks

→ See references/tanstack-form-basics.md for detailed usage

Validation Adapters

→ See references/zod-validation.md for Zod patterns → See references/yup-valibot.md for alternatives

Key Features

Async Validation

Server-side checks with debouncing and loading states. → See references/async-validation.md

Server Actions (React 19)

Integration with useActionState and progressive enhancement. → See references/server-actions.md

Arrays & Nested Fields

Dynamic field arrays and dot notation for nested objects. → See references/arrays-nested.md

TypeScript Integration

Full type inference from Zod schemas and defaultValues. → See references/typescript.md

shadcn/ui Integration

Field wrapper components with shadcn styling. → See references/shadcn-integration.md

Listeners (Side Effects)

onMount, onChange, onBlur, onSubmit with debouncing. → See references/listeners.md

Linked Fields

Cross-field validation and dependent dropdowns. → See references/linked-fields.md

Reactivity & Performance

useStore selectors and granular subscriptions. → See references/reactivity.md

Reset API

Form and field reset with custom values. → See references/reset-api.md

SSR & Hydration

TanStack Start integration and server state merge. → See references/ssr-hydration.md

Devtools

Debug form state with @tanstack/react-form-devtools. → See references/devtools.md

React Native

Mobile-specific patterns with TextInput. → See references/react-native.md

Standard Schema

ArkType and Effect Schema support. → See references/standard-schema.md

Templates

Best Practices

1. Validation: Use Zod/Yup/Valibot, NOT custom regex
2. Async: Debounce server validation (300-500ms)
3. Errors: Display field.state.meta.errors
4. Nested: Use dot notation (address.street)
5. Arrays: Use mode="array" with pushValue/removeValue
6. TypeScript: Infer types with z.infer<typeof schema>

Forbidden (Anti-Patterns)

• ❌ useState for form state → use useForm()
• ❌ Regex validation → use Zod/Yup/Valibot
• ❌ No debounce on async → use onChangeAsyncDebounceMs
• ❌ Validation in components → move to schema
• ❌ Direct onChange → use field.handleChange
• ❌ No TypeScript types → use z.infer<typeof schema>

Converted and distributed by TomeVault — claim your Tome and manage your conversions.