Required numeric field with empty initial value causes type error

[kk-analytics]

I want:

price to start empty in the UI
Validation to require a number ≥ 0 before submission
No TypeScript type errors with react-form + Zod

const schema = z.object({ price: z.number().int('Price must be an integer').min(0).max(1000000), });

const form = useForm({ defaultValues: { price: undefined }, validators: { onSubmit: schema }, });

Type 'ZodObject<{ price: ZodNumber; }, $strip>' is not assignable to type 'FormValidateOrFn<{ price: undefined; }> | undefined'.
Type 'ZodObject<{ price: ZodNumber; }, $strip>' is not assignable to type 'StandardSchemaV1<{ price: undefined; }, unknown>'.
The types of ''~standard'.types' are incompatible between these types.
Type 'Types<{ price: number; }, { price: number; }> | undefined' is not assignable to type 'StandardSchemaV1Types<{ price: undefined; }, unknown> | undefined'.
Type 'Types<{ price: number; }, { price: number; }>' is not assignable to type 'StandardSchemaV1Types<{ price: undefined; }, unknown>'.
The types of 'input.price' are incompatible between these types.
Type 'number' is not assignable to type 'undefined'.

[dosubot[bot]]

Hi @kk-analytics! I'm Dosu and I’m helping the zod team.

Hey! 👋 I'm a bot trained on Zod's codebase and issues.

This is a common type mismatch issue when integrating Zod with form libraries (looks like you're using TanStack Form based on useForm). The problem is that your schema expects price to be a number, but your defaultValues has price: undefined.

The fix: If you want the field to start as undefined (empty), you need to tell Zod that's acceptable:

const schema = z.object({
  price: z.number().int('Price must be an integer').min(0).max(1000000).optional(),
});

Or, if you're working with HTML form inputs that return strings, you might want to use coercion with an explicit input type (as recommended by the maintainer):

const schema = z.object({
  price: z.coerce.number<string>().int('Price must be an integer').min(0).max(1000000),
});

Also, don't manually type your useForm generic — let TypeScript infer it from the schema/validator. This avoids input/output type mismatches.

If this answers your question, feel free to close this discussion!

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[sueun-dev]

One thing worth clarifying: .optional() will let undefined pass validation, which contradicts your third requirement — "validation must require a number ≥ 0 before submission." An empty submit would silently succeed.

Here are two approaches that keep the field required on submit:

Option 1: z.coerce.number() with an empty string default (simplest)

const schema = z.object({
  price: z.coerce.number()
    .int('Price must be an integer')
    .min(0, 'Price is required')
    .max(1000000),
});

const form = useForm({
  defaultValues: { price: '' },  // empty string, not undefined
  validators: { onSubmit: schema },
});

z.coerce.number() has an unknown input type, so it's compatible with a string default. It converts '' to NaN, which fails .min(0) — so the field stays required. Just bind the input with e.target.value (string), not e.target.valueAsNumber.

Option 2: z.preprocess() if you need undefined → required error message

const schema = z.object({
  price: z.preprocess(
    (val) => (val === '' || val === undefined ? undefined : Number(val)),
    z.number({ required_error: 'Price is required' })
      .int('Price must be an integer')
      .min(0)
      .max(1000000),
  ),
});

const form = useForm({
  defaultValues: { price: '' },
  validators: { onSubmit: schema },
});

z.preprocess explicitly maps empty string or undefined back to undefined before the number validator runs, so you get the required_error message instead of "expected number, received nan."

Either way, the key fix for the TypeScript error is switching defaultValues.price from undefined to '' — the schema's input type becomes unknown (coerce) or any (preprocess), which is assignable to the form's inferred type.