← Back to docs
Recipes

Recipes & Common Patterns

Complete, copy-paste patterns for the most common hookform-action use cases. Each recipe includes a working server action, a typed client component, key concepts, and pitfalls to avoid.

Start Here

Tier 1 · Must-have

These five recipes cover the patterns every app needs. Learn them first.

#1

Login Form

The foundation pattern: withZod action, useActionForm, isPending, and error display.

#2

Sign Up with Server Errors

Business validation errors from the server mapped back to specific form fields.

#3

Reset After Success

Three canonical patterns: redirect, in-place reset with onSuccess, and isSubmitSuccessful guard.

#4

Edit Form with Server Data

Pre-populate from a Server Component, track dirty fields, and revalidate on success.

#5★ Featured

Multi-Step Wizard

Per-step validation with trigger(), sessionStorage persistence with persistKey, and safe progress clearing on submit.

Intermediate Patterns

Tier 2 · Common

Patterns you will reach for often as your app grows.

#6⚡ Advanced feature

Optimistic UI

Instant feedback with optimisticData, temporary IDs, and automatic rollback on error.

#7

Modal / Dialog Form

Form lifecycle inside a modal: reset on open, close on success, and Shadcn/ui Dialog integration.

#8

Dynamic Fields with useFieldArray

Add and remove array items, validate each row, and submit a typed array to the server action using useFieldArray from React Hook Form.

Advanced Patterns

Tier 3 · Specialized

Edge cases, ecosystem integrations, and power-user patterns.

#9

File Upload

FormData actions, file type and size validation, image preview, and isPending progress indicator.

#10

Nested Fields & Sub-components

Compose large forms from smaller components using useFormContext without prop drilling.

#11

Custom Error Mapper

Translate non-standard API error shapes (Laravel, Rails, REST) to React Hook Form field errors.

#12🚀 Standalone

Standalone — Vite, Remix & APIs

Use hookform-action-standalone with fetch or axios outside of Next.js.

All recipes use real, working code with full TypeScript types. Each pattern maps directly to a capability of the hookform-action API. Read the API reference →