r/reactjs•
Asphyxis_

RHF with Zod - Error on Number Field

Needs Help

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
Loading comments…