Required numeric field with empty initial value causes type error

[JohnyJDX]

How make

1. price to start empty in the UI
2. Validation to require a number ≥ 0 before submission
3. 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 }, })
An error occurred in the current code

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'.

[sueun-dev]

The type error is intentional by design. TanStack Form infers the form data type from defaultValues, not from the validator schema. So defaultValues: { price: undefined } gives the form a type of { price: undefined }, and z.number() has an input type of number — those don't match, hence the StandardSchemaV1 complaint.

There are a few practical ways to fix this:

Option 1: Make the schema's input type accept undefined, then refine for required (recommended)

const schema = z.object({
  price: z
    .number()
    .int('Price must be an integer')
    .min(0)
    .max(1000000)
    .optional()
    .refine((v): v is number => v !== undefined, { message: 'Price is required' }),
});

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

.optional() widens the input type to number | undefined, which matches your defaultValues. The .refine() then makes it required on submission. This satisfies TypeScript without losing the required validation.

Option 2: Field-level validation (avoids schema altogether)

const form = useForm({
  defaultValues: { price: undefined as number | undefined },
});

// In your JSX:
<form.Field
  name="price"
  validators={{
    onSubmit: ({ value }) => {
      if (value === undefined || value === null) return 'Price is required';
      if (!Number.isInteger(value)) return 'Price must be an integer';
      if (value < 0 || value > 1_000_000) return 'Price must be between 0 and 1,000,000';
    },
  }}
>

Field-level validators don't go through StandardSchemaV1 so there's no type mismatch.

Option 3: If your input is an HTML <input type="number"> (which returns strings)

Use coercion and cast the default to match:

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

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

z.coerce.number<string>() explicitly sets the input type to string (matching what <input type="number"> actually gives you before coercion), and the empty string default aligns with "starts empty in the UI."

---

The underlying limitation — that form types are inferred from defaultValues rather than the validator schema — is a known open issue (#1583). The maintainers intentionally rejected making defaultValues a partial type because it would "lie to TypeScript about the runtime shape." Option 1 or 2 above is the current recommended workaround.