{"record":{"id":"9da33a70424fcaff","repo":"shadcn-ui/ui","slug":"useformfield-should-be-used-within-formfield","errorCode":null,"errorMessage":"useFormField should be used within <FormField>","messagePattern":"useFormField should be used within <FormField>","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"apps/v4/registry/new-york-v4/ui/form.tsx","lineNumber":53,"sourceCode":">({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n","sourceCodeStart":35,"sourceCodeEnd":71,"githubUrl":"https://github.com/shadcn-ui/ui/blob/efac5987074af84ece57c367c6dd83387b967022/apps/v4/registry/new-york-v4/ui/form.tsx#L35-L71","documentation":"useFormField reads two contexts: FormFieldContext (set by <FormField>, which wraps react-hook-form's Controller) and FormItemContext (set by <FormItem>). It also calls useFormContext (react-hook-form) and getFieldState. If FormFieldContext is the default {} (no <FormField> ancestor), fieldContext is truthy-but-empty; the explicit `if (!fieldContext)` then catches the case where it is genuinely absent and throws, because formItemId/name/fieldState cannot be computed without a registered field.","triggerScenarios":"Using <FormLabel>, <FormControl>, <FormDescription>, or <FormMessage> outside of a <FormField>; nesting them in a sibling instead of a child of <FormField>; rendering form controls under a plain <form> without react-hook-form's <Form>.","commonSituations":"Copy-pasting <FormLabel> into a non-form layout; refactoring a field and dropping the <FormField> wrapper; using these components with a different form library.","solutions":["Wrap each field group in <FormField name=... render=...> so FormFieldContext is populated.","Ensure the whole form is inside react-hook-form's <Form> (useFormContext needs it).","Keep <FormLabel>/<FormControl>/<FormDescription>/<FormMessage> as descendants of <FormItem> within <FormField>."],"exampleFix":"// before\n<FormLabel>Email</FormLabel>\n<Input />\n\n// after\n<FormField\n  name=\"email\"\n  render={({ field }) => (\n    <FormItem>\n      <FormLabel>Email</FormLabel>\n      <FormControl><Input {...field} /></FormControl>\n      <FormMessage />\n    </FormItem>\n  )}\n/>","handlingStrategy":"validation","validationCode":"function useOptionalFormField() {\n  const field = React.useContext(FormFieldContext)\n  if (!field?.name) return null\n  return useFormField() // safe now\n}","typeGuard":"// react-hook-form's Controller populates FormFieldContext only inside <FormField>\nfunction useHasFormField(): boolean {\n  return Boolean(React.useContext(FormFieldContext)?.name)\n}","tryCatchPattern":null,"preventionTips":["Always wrap each field in <FormField name=... render=...>.","Ensure the whole form is inside react-hook-form's <Form> (useFormContext needs it).","Keep <FormLabel>/<FormControl>/<FormDescription>/<FormMessage> as descendants of <FormItem> within <FormField>.","Smoke-test each field rendered within <FormField>."],"tags":["react","context","form","react-hook-form"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}