RHF with Zod - Error on Number Field
I am trying to create a form using shadcn's Form elements. If I use z.number(), I am getting the input as string. I tried z.coerce.number() but it is giving an error. I couldn't solve the issue.
Form:
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
import { Input } from "./ui/input";
const formSchema = z.object({
numberField: z.coerce.number(),
});
export function ExampleForm({ className, ...props }: React.ComponentProps<"div">) {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema), // Error
defaultValues: {
numberField: 0,
},
});
return (
<Form {...form}>
<form>
<div className="flex flex-col gap-6 text-left">
<FormField
name="numberField"
control={form.control} // Error
render={({ field }) => (
<FormItem>
<div className="grid gap-3">
<FormLabel>...</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</div>
</FormItem>
)}
/>
</div>
</form>
</Form>
);
}
Error:
Type 'Resolver<{ numberField: unknown; }, any, { numberField: number; }>' is not assignable to type 'Resolver<{ numberField: number; }, any, { numberField: number; }>'.
Types of parameters 'options' and 'options' are incompatible.
Type 'ResolverOptions<{ numberField: number; }>' is not assignable to type 'ResolverOptions<{ numberField: unknown; }>'.
Type 'unknown' is not assignable to type 'number'.
Posted Aug 4, 2025, 4:38 PM UTC
12