shadcn-syntax-form

name	shadcn-syntax-form
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.
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

shadcn ui : Form Composition (react-hook-form + zod)

The shadcn Form layer is a thin set of seven composition primitives wrapping react-hook-form and wiring accessibility attributes automatically. Every claim in this skill traces to the canonical source at apps/v4/registry/new-york-v4/ui/form.tsx in the shadcn-ui/ui repository and to the verbatim API of react-hook-form and zod.

ALWAYS read shadcn-core-architecture first if the copy-not-install paradigm is unclear. ALWAYS read shadcn-syntax-variant-cva if cn() and the variant model are unclear.

Quick Reference

Minimal form snippet

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"

const formSchema = z.object({
  username: z.string().min(2, "At least 2 characters.").(),
})

  = z.< formSchema>

  () {
   form = useForm<>({
    : (formSchema),
    : { :  },
  })

   () {
    .(values)
  }

   (
    
  )
}