I'll completely revise the form structure to fix the "useFormField should be used within <FormField>" error by ensuring all form components are properly nested.
I've completely revised the form to fix the "useFormField should be used within <FormField>" error. Here are the key changes:
I replaced the shadcn/ui RadioGroup components with native HTML radio inputs that don't rely on the FormField context:
<div className="flex items-center space-x-2">
<input
type="radio"
id="existing"
value="existing"
checked={field.value === "existing"}
onChange={() => field.onChange("existing")}
className="h-4 w-4 rounded-full border border-primary text-primary"
/>
<label htmlFor="existing" className="text-sm font-normal">
Use existing number
</label>
</div>I added the shadcn/ui Label component which doesn't depend on FormField context:
import { Label } from "@/components/ui/label"I replaced FormLabel and FormDescription with Label and a styled paragraph:
<div className="flex flex-col space-y-1.5">
<Label htmlFor="dropzone-file">Supporting Documentation (Optional but recommended)</Label>
<p className="text-sm text-muted-foreground">
Please upload supporting documentation to speed up processing time such as an invoice
</p>
</div>I ensured all FormControl components are properly nested within FormField components and contain only one direct child element.
I added default empty string values for currency fields to prevent undefined values:
defaultValues: {
// ...
sendingCurrency: "",
sendingAmount: "",
receivingCurrency: "",
}These changes maintain the same visual appearance and functionality while ensuring all form components are used correctly within their required context. The error "useFormField should be used within <FormField>" should now be resolved.
I'll transform the form into an interactive multi-step experience to improve usability and reduce cognitive load for users.
I've transformed the OTC Request Form into an interactive multi-step experience with the following enhancements:
This multi-step approach significantly improves usability for complex forms, especially on mobile devices, and provides a clearer path to completion for users.