shadcn-errors-form-state

name	shadcn-errors-form-state
description	Use when a shadcn Form built on react-hook-form silently submits with missing values, when a Radix Select or Checkbox or RadioGroup or Switch never updates form state, when FormMessage refuses to render the zod error, when the console logs "A component is changing an uncontrolled input to be controlled" on first keystroke, when the entire form re-renders on every character typed, when an async zod refine never blocks submission, when handleSubmit fires with no validation, when formState.isDirty or formState.isValid stays stuck at false, when reset() does not clear errors, when a file input loses its FileList after the first render, when a server validation response should light up specific field errors, when defaultValues is partially specified and some fields jump from uncontrolled to controlled, or when a typo in the zod schema field path causes a field to never validate without warning. Prevents the six recurring react-hook-form failures inside shadcn Form composition : using register on a non-native control (Select, Checkbox, RadioGroup, Switch) so its value never enters form state, calling form.watch inside the component body so every keystroke re-renders the entire form, passing defaultValues with undefined fields so React fires the controlled versus uncontrolled warning on first interaction, nesting FormField outside the Form provider so the inner context lookup returns null, defining the zod schema with a field path that does not match the FormField name string, and passing only one argument to handleSubmit so invalid submissions vanish silently with no onInvalid handler. Covers the Controller-versus-register decision matrix, the watch-versus- useWatch re-render trap, the defaultValues-versus-values-versus-reset triad and when each is correct, the FormMessage context-binding requirement, the resolver schema-path-must-match-FormField-name rule, the formState subscription model and which keys must be read to subscribe, the handleSubmit(onValid, onInvalid) two-argument signature, the async refine pattern with debounce and AbortController, and the file-input Controller pattern with manual FileList handling. Keywords: form state error, Controller vs register, react-hook-form watch re-render, FormMessage not showing, defaultValues undefined, controlled uncontrolled warning, zod refine async, form silent submit, form errors not displaying, register on shadcn Select, Select onValueChange not firing, Checkbox onCheckedChange ignored, useWatch vs watch, useFormContext returned null, FormField outside Form, schema path mismatch, handleSubmit onInvalid, isValid stuck false, isDirty never true, reset does not clear errors, setError server error, file input react-hook-form, FileList disappears, formState subscription, isValidating, useFormState, async validation, email already taken, debounce refine, zodResolver typo, my form does not submit, my form submits empty values, why is my Select not validated.
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

shadcn ui Errors: Form State and react-hook-form Integration

When a shadcn Form silently submits with missing values, when a Select never validates, or when FormMessage refuses to show the zod error, the cause is almost always one of six things : (1) register was used on a non-native control whose value never reaches form.control, (2) form.watch was called inline in the component body and re-rendered the whole subtree on every keystroke, (3) defaultValues was incomplete so a field flipped from uncontrolled to controlled on first interaction, (4) FormField was rendered outside the <Form> provider so the context returned null, (5) the zod schema path does not match the name string in FormField (typo), or (6) handleSubmit was called with only the success handler so invalid submissions vanished silently. This skill enumerates the deterministic rules and the verified API shapes so the diagnosis takes seconds.

Every claim traces to the shadcn Form recipe at https://ui.shadcn.com/docs/forms/react-hook-form and to the react-hook-form API at https://react-hook-form.com/docs/useform.

Quick Reference

Controller vs register matrix (memorize this)

For each input type, exactly one of register or Controller (via FormField) is correct. Picking the wrong one is the single most common cause of "my form submits empty values".

Input type	Use	Reason
Native <input> (text, email, number, url, password)	register OR Controller/FormField	Both work ; FormField adds aria wiring automatically
Native <textarea>	register OR Controller/FormField	Same as text input
Native <select> (HTML element)	register OR Controller/FormField	Native select fires change event ; register listens for it