skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-errors-form-state

Diagnose shadcn ui Form validation failures and react-hook-form state wiring issues.

Updated May 19, 2026
Search Tags:#debugging#zod#shadcn#react-hook-form#form-validation#radix-select#FormMessage
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-errors-form-state
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-errors-form-state
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-errors/shadcn-errors-form-state
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-errors-form-state

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about shadcn-errors-form-state

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my shadcn Form submit with empty or missing values for Select and Checkbox?▼

Radix-wrapped inputs like Select and Checkbox fail to update form state when wired with react-hook-form's `register` instead of `Controller`. You must use `FormField/Controller` for these controls to ensure values correctly enter the form state on change.

How do I fix an empty FormMessage that shows no validation errors in shadcn ui?▼

An empty FormMessage usually occurs when the `FormField` is placed outside the `<Form>` provider or the zod schema path mismatches the field name. Ensure correct context placement so `FormMessage` can read the field error.

How do I prevent react-hook-form re-render storms when watching shadcn input values?▼

Re-render storms happen when using `watch` improperly. Switch to `useWatch` with correct subscription behavior to isolate field updates and prevent unnecessary component re-renders across the form.

How do I block form submission during async zod refine validation in shadcn?▼

Async zod refine does not block properly if the resolver path matching is incorrect. Verify the zod schema paths exactly match the `FormField name` and include an `onInvalid` handler in `handleSubmit` to catch validation failures.

Do I need to define defaultValues for every field in a shadcn Form?▼

Incomplete or undefined `defaultValues` cause controlled/uncontrolled warnings and confusing submit behavior. Define complete `defaultValues` for every field to maintain consistent controlled state across Radix inputs.

Why is my shadcn Form handleSubmit swallowing invalid submissions?▼

Invalid submissions are swallowed when `handleSubmit` lacks the required two-argument signature. Always pass both `onValid` and `onInvalid` handlers to `handleSubmit` to execute logic for failed validation attempts.

Related Skills

Explore More Software Engineering Skills→
hopeoverturehopeoverture
6

form-generator-rhf-zod

Generate React forms with React Hook Form, Zod validation, and shadcn/ui controls.

Community
Advanced
Impertio-StudioImpertio-Studio

shadcn-agents-form-validator

Validates shadcn Form components using zod schema and react-hook-form wiring rules.

Official
Advanced
Impertio-StudioImpertio-Studio

shadcn-syntax-form

Compose shadcn ui forms with react-hook-form and zodResolver.

Official
Advanced
antonyfmunozantonyfmunoz

react_hook_form

Manage React form state with React Hook Form and Zod validation.

Community
Advanced