shadcn-syntax-field

name	shadcn-syntax-field
description	Use when building forms in shadcn ui evergreen-2026 and the new Field primitive family is the recommended path, when composing Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet, FieldLegend, FieldContent, FieldSeparator, or FieldTitle, when wiring accessibility attributes (htmlFor, id, aria-invalid, aria-describedby) by hand around a controlled input, when integrating shadcn inputs with react-hook-form Controller WITHOUT the higher-level Form / FormField wrappers, when integrating with TanStack Form, when choosing between the older Form composition path and the newer Field path, or when an error message fails to render under a Field-wrapped input. Prevents the common Field failures : omitting FieldLabel htmlFor so the label does not focus the control, rendering FieldError outside its parent Field so data-invalid styling never applies, mixing Field with FormField in the same field tree, forgetting aria-invalid on the inner input so screen readers do not announce the error, and using Field as a generic layout wrapper for non-form content. Covers the ten exported Field primitives and their exact composition tree, the data-invalid pattern that drives destructive colour tokens, the Field-plus-Controller pattern that is the canonical react-hook-form integration in 2026, the Field-plus-TanStack-Form pattern, the standalone Field pattern without any form-state library, the FieldGroup container queries that switch orientation responsively, the FieldSet plus FieldLegend pattern for grouped controls, and the decision tree between Field (new flexible path) and the older Form composition (legacy quick-scaffold path). This skill covers the Field primitive layer only. The Form composition layer that wraps Field with react-hook-form context is documented in shadcn-syntax-form. Both paths coexist in the registry. Keywords: shadcn field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet, FieldLegend, FieldContent, FieldSeparator, FieldTitle, a11y form primitive, accessibility form primitive, form 2026 path, new shadcn form path, field vs form, Field versus FormField, Controller with Field, react-hook-form Controller, TanStack Form Field, aria-describedby, aria-invalid, data-invalid, htmlFor, label not focusing, error not showing under input, how do I build a form without FormField, how to use shadcn ui Field, orientation horizontal field, responsive field, Standard Schema errors, zod field errors, valibot field errors.
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

shadcn ui : Field primitive (a11y form foundation, 2026)

The Field family is the accessibility foundation introduced in shadcn ui 2026. It provides the same label/description/error wiring as the older Form composition but WITHOUT coupling to react-hook-form. Every claim in this skill traces to the canonical source at apps/v4/registry/new-york-v4/ui/field.tsx in shadcn-ui/ui and to the official docs at https://ui.shadcn.com/docs/components/radix/field and https://ui.shadcn.com/docs/forms/react-hook-form.

ALWAYS read shadcn-core-architecture first if the copy-not-install paradigm is unclear. ALWAYS read shadcn-syntax-form when working on an existing codebase that already uses the older <Form> / <FormField> composition; the two layers coexist but should not be mixed inside one field tree.

Quick Reference

Minimal Field + react-hook-form Controller (canonical 2026 path)

"use client"

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

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const formSchema = z.object({
  title: z.().(, ).(),
})

  = z.< formSchema>

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

   () {
    .(values)
  }

   (
    
  )
}