How to satisify TypeScript when assigning defaultValue of '' empty string to a number field?

[xsjcTony]

I want the number input to have no value by default.
Consider this where I'm using control for controlled inputs (not a fan of register):

const { control } = useForm<{ price: number }>({
  defaultValue: {
    price: ''
    // TS2322: Type 'string' is not assignable to type 'number'.
  }
}

Although I can use // @ts-expect-error - placeholder empty string here to suppress the issue, but is there any better alternative?

Below are what I've tried:

• Don't specify it
  • Leads to a React warning of making an uncontrolled input into a controlled one
  • Breaks my custom zod error map
• Use ''
  • Leads to TypeScript error above
• Use 0
  • A 0 will be prefilled into the input which is NOT what I want

[SpadarShut]

The first generic argument is your form dirty field values, and third is Ttransformed/valid values that get as first argument into you submit handler. So try this:

useForm<{ price: number | string }, void, { price: number }>

[Labastidaa]

Where you able to find a solution? I have the same question.

But I am defining my form Schema using Zod

const formSchema = z.object({
  name: z.string().min(3),
  last_name: z.string().min(3),
  email: z.string().email(),
  password: z.string().min(8,{ message: "Password should be atleast 8 characters"}).max(20),
  phone: z.number().min(9).max(9),
})

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: '',
      last_name: '',
      email:'',
      password: '',
      
    }
  })

[KarsonJo]

In Zod v4, it seems that z.coerce and z.input can be used to create a number field that accepts string input. You can use schema.parse to obtain the type inferred by z.infer:

import { z } from "zod/v4";

const schema = z.object({
  price: z.coerce.number("notGreaterThanZero").gt(0, "notGreaterThanZero"),
});
type ISchema = z.input<typeof schema>; // Use the input type

function Example() {
  const {
    register,
    handleSubmit,
    formState: { errors, isDirty },
  } = useForm<ISchema>({
    resolver: standardSchemaResolver(schema),
    defaultValues: { price: "" },
  });

  function onSubmit(data: ISchema) {
    const coercedData = schema.parse(data); // Retrieve the coerced data (z.infer type)
    console.log(coercedData);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>Dirty: {isDirty ? "true" : "false"}</div>
      <div>{JSON.stringify(errors.price?.message)}</div>
      <input type="number" {...register("price")} />
      <button>Submit</button>
    </form>
  );
}