Use when building an end-to-end form workflow in shadcn ui that combines the Form composition primitives with react-hook-form and zod, when wiring the full pipeline from zod schema to typed submit handler to server-error display, when adding async validation (email availability, username taken, coupon check), when surfacing API errors back to a specific field via setError, when toggling a submit button between idle, submitting, success, and disabled states, when resetting a form after successful submit to clear stale state, when building a multi-step wizard that preserves form state across pages, or when wiring a file upload control into the react-hook-form value tree. Prevents the common end-to-end form failures: defining the zod schema inside the component so the resolver re-creates every render, mixing schema validation with manual setError on the same field so the two systems race and the user sees flickering error text, omitting form.handleSubmit on the form element so the browser submits natively and re
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Use when building an end-to-end form workflow in shadcn ui that combines the Form composition primitives with react-hook-form and zod, when wiring the full pipeline from zod schema to typed submit handler to server-error display, when adding async validation (email availability, username taken, coupon check), when surfacing API errors back to a specific field via setError, when toggling a submit button between idle, submitting, success, and disabled states, when resetting a form after successful submit to clear stale state, when building a multi-step wizard that preserves form state across pages, or when wiring a file upload control into the react-hook-form value tree. Prevents the common end-to-end form failures: defining the zod schema inside the component so the resolver re-creates every render, mixing schema validation with manual setError on the same field so the two systems race and the user sees flickering error text, omitting form.handleSubmit on the form element so the browser submits natively and reloads the page with no validation at all, never calling form.reset after a successful submit so the form retains the just-submitted data and the user accidentally re-submits, reading form.formState.isLoading instead of form.formState.isSubmitting (isLoading reflects async defaultValues loading, not submit state), leaving a defaultValues key undefined so the first user keystroke triggers a controlled-to-uncontrolled warning, rendering FormDescription outside FormItem so the aria-describedby wiring never finds the description id, and binding a File input with register so the FileList is lost on validation re-run. Covers the five-step end-to-end workflow (schema -> useForm -> compose -> submit -> error-handling), the Controller-versus-register decision matrix per shadcn input, the async refine pattern with debounce, the setError-after-server-error pattern that maps API errors back onto specific fields, the isSubmitting submit-button-disabled pattern, the form.reset on successful submit pattern, the multi-step wizard pattern via a single FormProvider plus useFormContext across pages, the file upload via Controller plus FileList plus zod refine pattern, and the exact onValid plus onInvalid handleSubmit signature. This skill orchestrates the react-hook-form path. The Field-plus-Controller path covered in shadcn-syntax-field is the recommended 2026 baseline for new projects; see shadcn-syntax-form for the primitive composition tree. Keywords: shadcn form workflow, zod form, form validation end-to-end, async form validation, server error setError, form reset, isSubmitting, multi-step form, file upload form, how do I validate a form, react-hook-form zodResolver, zodResolver hookform, z.infer schema, email availability check, coupon code validation, debounced async refine, setError manual, mapServerErrorsToFields, form.reset after submit, controlled to uncontrolled warning, form does not submit, submit button stays enabled, submit button spinner, multi-step wizard form, wizard form state, FormProvider wizard, useFormContext step, file input react-hook-form, FileList Controller, zod refine async, zod superRefine, form.formState.isSubmitting, form.formState.isValidating, FieldErrors, onValid onInvalid, api error to field, server validation react-hook-form, why does my form reload the page, why is my submit handler not called.
license
MIT
compatibility
Designed for Claude Code. Requires shadcn ui evergreen-2026.
metadata
{"author":"OpenAEC-Foundation","version":"1.0"}
shadcn ui: end-to-end Form workflow (zod + react-hook-form)
This skill is the IMPLEMENTATION recipe that orchestrates the primitives covered in shadcn-syntax-form, shadcn-syntax-field, and shadcn-syntax-selectors. It teaches the five-step workflow from zod schema definition to typed submit handler to server-error display.
ALWAYS read shadcn-syntax-form first if the seven Form primitives are unclear. ALWAYS read shadcn-syntax-selectors first if binding Select, Checkbox, RadioGroup, or Switch to Controller is unclear.
NEVER bind a Radix-wrapped shadcn control with register. NEVER bind a file input with register because the FileList resets on every re-render.
The five-step end-to-end workflow
Step 1: define the zod schema (module scope)
ALWAYS define the schema OUTSIDE the component body and infer the TypeScript type via z.infer. NEVER inline the schema inside the component: the schema object would be re-created every render, zodResolver(schema) would also re-create, and react-hook-form's memoised resolver reference would invalidate every render.
ALWAYS use .refine (not .superRefine) for single-field or cross-field rules with a single message. ALWAYS set path: [<field-name>] so the error attaches to a specific field; without path, the error attaches to the form root and <FormMessage /> will not render it.
Step 2: instantiate useForm with zodResolver
ALWAYS pass resolver: zodResolver(schema) and explicit defaultValues for every field declared in the schema. ALWAYS pass the inferred type as the generic to useForm<SignUpValues> so form.control, form.setValue, and the onSubmit data argument are all type-safe.
ALWAYS provide a default for every schema key ("" for strings, false for booleans, 0 or null for numbers, [] for arrays, null for files). NEVER leave a default undefined: react-hook-form treats undefined as uncontrolled and React warns on the first keystroke.
Step 3: compose Form primitives
ALWAYS spread {...form} on <Form>, ALWAYS pass onSubmit={form.handleSubmit(onValid)} to the inner <form> element, ALWAYS wrap every field in <FormField control={form.control} name="<schema-key>" render={({ field }) => (...)}>, ALWAYS render exactly one <FormItem> per field, and ALWAYS include <FormMessage /> even when no description is present. See shadcn-syntax-form for the seven-primitive composition tree.
Step 4: handle submit (onValid + onInvalid)
form.handleSubmit(onValid, onInvalid?) returns a single event-handler function. ALWAYS pass the RESULT of calling handleSubmit, never handleSubmit itself.
asyncfunctiononValid(values: SignUpValues) {
// values are zod-parsed and type-safe.// ... call API, handle server errors, reset on success.
}
functiononInvalid(errors: FieldErrors<SignUpValues>) {
// optional: runs only when client-side validation fails.
}
<form onSubmit={form.handleSubmit(onValid, onInvalid)}>...</form>
While onValid returns a pending Promise, form.formState.isSubmitting is true. ALWAYS disable the submit button via disabled={form.formState.isSubmitting} so the user cannot double-submit. NEVER read form.formState.isLoading for this purpose: isLoading reflects async defaultValues loading, not submit progress.
Step 5: error handling (server + reset)
ALWAYS map server-returned field errors back via form.setError(fieldName, { type: "server", message }) AFTER the API call resolves. ALWAYS call form.reset() after a successful submit so the form clears stale data (unless the form is an edit-existing-record flow where the user expects to keep the values).
ALWAYS use "root.<key>" (e.g. "root.serverError") for non-field-specific errors. The error is readable from form.formState.errors.root?.serverError?.message and survives until the next form.clearErrors("root.serverError") or form.reset().
Async validation pattern
zod supports async refinement via .refine(async ...) and .superRefine(async ...). form.formState.isValidating is true while at least one async check is in flight. Use this for email availability, username taken, coupon code checks.
ALWAYS debounce the network call (300 to 500 ms) so each keystroke does not fire a request. ALWAYS handle the stale-response case by comparing the awaited value against the current schema input value (or by aborting prior requests via AbortController).
ALWAYS await every async check inside .refine. NEVER fire-and-forget an async call from .refine: the resolver expects a boolean (or boolean Promise) and a stale resolution after the user has moved on can flicker the error state. See references/examples.md for the AbortController + debounce pattern.
Server-side error mapping (setError)
Server validation errors that the client-side schema cannot catch (e.g. "email already taken", "invalid coupon code", "rate-limited") MUST be mapped back to specific fields via form.setError. ALWAYS use type: "server" so the error can be distinguished from client-side validation errors. ALWAYS clear server errors before re-submitting (form.clearErrors() runs implicitly via handleSubmit, but explicit clearErrors is safer for partial resubmits).
NEVER mix client-side zod validation and manual setError on the same field within the same render cycle: the next user keystroke triggers a re-validation that wipes the manual error. ALWAYS rely on the zod schema for everything the client can check and use setError ONLY for errors the server discovers.
Loading state on submit button
ALWAYS read form.formState.isSubmitting (not isLoading, not isValidating) to drive the submit button's disabled state.
A zod async .refine (or any async validator) is running.
isLoading
Async defaultValues (a Promise passed to useForm's defaultValues) is still loading.
isSubmitSuccessful
The last onValid call resolved without throwing.
isValid
The form passes the resolver.
ALWAYS gate the submit button on isSubmitting alone unless the schema is cheap to validate; gating on !isValid while async validation is in flight visibly flickers the button.
File upload pattern
File inputs MUST be bound via Controller (not register) because react-hook-form copies the FileList by reference and a re-render can wipe the value. ALWAYS store the FileList in form state; validate via .refine for file count, size, and MIME type.
ALWAYS destructure value away from the spread (a file input cannot have a controlled value prop in React). ALWAYS forward e.target.files (FileList), not e.target.files[0] (single File). For multipart upload to the server, build a FormData object in onSubmit.
Multi-step wizard pattern
Preserve form state across pages by wrapping every step in a single <FormProvider> (the same context that <Form> provides) and reading via useFormContext in each step component. The wizard renders ONE step at a time but the form state is shared.
ALWAYS call form.trigger(stepKey) before advancing to validate only the current step's fields. NEVER unmount form state between steps: react-hook-form preserves values across renders, but unmounting a <FormProvider> clears state. The FormProvider MUST be a stable ancestor of every step.
Companion Skills
shadcn-syntax-form (Batch 3): the seven Form primitives and their composition tree.
shadcn-syntax-field (Batch 4): the new 2026 Field primitive family that decouples a11y wiring from react-hook-form.
shadcn-syntax-selectors (Batch 5): binding Select, Combobox, Command palette via Controller.
shadcn-errors-form-state (Batch 12): top failure modes (Controller vs register confusion, watch over-rendering, async stale state).
shadcn-syntax-button: submit button variants and disabled={form.formState.isSubmitting} pattern.
Reference files
references/methods.md: full API signatures (useForm options, zodResolver, handleSubmit, setError, clearErrors, reset, trigger, formState fields, Controller props, common zod async patterns).
references/examples.md: minimal sign-in, sign-up with confirm-password, async email-availability with AbortController, server-error setError, file upload with FileList, multi-step wizard with FormProvider, isSubmitting submit button.
