此技能用于在 shadcn/ui 中构建表单,技术栈为 react-hook-form 加 zod。它围绕 shadcn Form 层的七个组合原语展开,并强调每项说法都追溯到 shadcn-ui/ui 仓库的 form.tsx 以及 react-hook-form、zod 的官方 API。前置阅读包括 shadcn-core-architecture(copy-not-install 范式)与 shadcn-syntax-variant-cva(cn() 与 variant 模型)。
七个原语为 Form、FormField、FormItem、FormLabel、FormControl、FormDescription、FormMessage,需按固定树状结构一起使用。Form 是 FormProvider 的再导出,必须展开 {...form};FormField 内部包装 Controller 并发布 name;FormItem 负责布局并生成 id;FormLabel 设置 htmlFor 与 data-error;FormControl 渲染 Slot.Root,只接受单个子元素,并自动接线 id、aria-describedby、aria-invalid;FormDescription 与 FormMessage 分别通过描述 id 与消息 id 接入描述文本和 zod 错误。资料强调永远不要省略 FormMessage,否则 zod 错误不会渲染,且 FormMessage 内留空即可。
用法上建议 schema 优先:zod schema 定义在组件外部,用 z.infer 推导类型,useForm 显式传入泛型。对于不接受原生 ref 的 Radix 封装控件(Select、Checkbox、RadioGroup、Switch、Slider 等),必须走 FormField/Controller 的受控绑定;原生 input、textarea、select 可用 register。defaultValues 在挂载时设置一次,异步数据用 values 或 form.reset;每个字段都要提供默认值以避免受控/非受控警告。提交用 form.handleSubmit(onValid, onInvalid),异步期间用 form.formState.isSubmitting 禁用按钮,异步 refine 需 await。导入 form 的文件必须加 "use client",且不要把 Form 与 FormField 拆到服务端/客户端边界两侧。
资料还指出 2026 年的 Field 原语族是可选的较新路径,本技能所述 Form 组合仍受支持。限制方面:资料未提供安装命令、收费或价格、平台要求与效果数据,这些暂未提供。