| description | Use when building forms with shadcn ui and react-hook-form plus zod, when composing the seven Form primitives (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage), when wiring zodResolver to useForm, when deciding between Controller and register for a given input type, when validation errors fail to render under a field, when an input value never reaches the submit handler, or when an input throws a "switched from uncontrolled to controlled" warning. Prevents the common form failures : using register on a non-native control (Select, Checkbox, RadioGroup, Switch) so its value never enters form-state, forgetting FormMessage so zod errors silently never render, defining the zod schema inside the component body so it re-creates every render and kills memoised resolver references, calling handleSubmit without wiring it to the form's onSubmit prop so validation never runs, omitting the outer Form spread so FormField cannot reach the form context, and setting defaultValues to undefined so the input jumps from uncontrolled to controlled on first user keystroke. Covers the seven Form primitives and their accessibility wiring, the schema-first useForm + zodResolver setup, the z.infer-typeof pattern for TypeScript inference, the Controller-versus-register decision tree, the defaultValues-versus-values-versus-reset triad, the handleSubmit onValid-onInvalid signature, async refine validation, the 'use client' requirement under React Server Components, and a forward-pointer to the newer Field primitive that sits beneath Form composition. This skill covers the react-hook-form path only. TanStack Form is listed as the alternative in the shadcn ui docs and is out of scope here. Keywords: shadcn form, react-hook-form, zod, zodResolver, FormField, Controller, FormMessage, FormControl, FormLabel, FormItem, FormDescription, useForm, schema-first form, z.infer, form validation not showing, validation error not appearing, error message not rendered, value not in submit data, input shows no error, form does not submit, how do I validate a form, how do I show form errors, how do I bind a Select to react-hook-form, how do I bind a Checkbox to react-hook-form, switched from uncontrolled to controlled, defaultValues, values, reset, handleSubmit, FormProvider, register vs Controller, async validation, refine, email already taken, async refine, use client form, RSC form, server components form, zod resolver, hookform resolvers, z.object, z.string, z.email, form context missing, useFormContext error.
|
