shadcn-errors-form-state

What problem does it solve?

This Skill helps you diagnose and resolve shadcn Form bugs where react-hook-form submits empty or missing values, Radix-based inputs (Select/Checkbox/RadioGroup/Switch) fail to update form state, FormMessage shows nothing, or async validation behaves incorrectly without firing expected handlers.

Core Features & Use Cases

• Deterministic root-cause checklist: pinpoints six common failure modes, including wrong register vs Controller wiring for Radix controls, watch-based re-render traps, incomplete/undefined defaultValues, FormField outside the <Form> provider, zod schema path mismatches, and missing handleSubmit(onInvalid) usage.
• Precise wiring rules for shadcn + react-hook-form: enforces the correct event/prop mapping matrix (e.g., onValueChange/onCheckedChange) and the required context placement so FormMessage can read the field error.
• Production debugging flow: guides you through a quick decision tree to determine whether values are not entering form state, validation is not running, errors are landing under a mismatched key, or invalid submissions are being swallowed.

Quick Start

Diagnose why your shadcn Form submits with missing or never-updated values by identifying whether each failing field is wired via FormField/Controller (not register), the zod schema paths exactly match the FormField name, and handleSubmit includes an onInvalid handler.