form-patternslisted

# Form Patterns — React Hook Form + Zod ## Overview Form handling patterns for React Hook Form + Zod: - Zod schemas as single source of truth for types - zodResolver integration - Server-side error mapping - Mutation integration with isPending - Reusable form field components - Schema composition and derivation - Testing forms (validation, submit, server errors) --- ## Hard Rules <HARD-RULES> These rules are NON-NEGOTIABLE. Violating any of them is a bug. - ALWAYS use Zod schema as single source of truth: `type FormData = z.infer<typeof schema>` - ALWAYS use `zodResolver` to connect Zod with React Hook Form - ALWAYS use `z.coerce.number()` for numeric inputs — HTML inputs return strings - NEVER use Formik in new code — React Hook Form is the standard - NEVER use controlled inputs without need — RHF defaults to uncontrolled for performance - ALWAYS map server-side errors to fields via `setError` - ALWAYS block submit with mutation `isPending` — prevent double submissions - ALWAYS define one schema per form — NEVER create a universal mega-schema - NEVER use `any` in form types — derive everything from Zod schemas - ALWAYS handle loading, error, and success states in form submission </HARD-RULES> --- ## Zod Schemas — Single Source of Truth ### Why Zod? Zod schemas define validation AND TypeScript types in one place. No type drift between frontend validation and TypeScript interfaces. ```typescript // ❌ BAD: Separate type and validation — they can drift apart interfac