Nullable inputs in react hook form with zod validation

[MincePie]

I am ready to give up trying with zod and react hook form.

I would like to have a nullable input field in my form. if an entry is made, then it must be a number between 1-5. Null values are fine because the field is nullable.

ATTEMPT 1:
scientific_merit_score: z.number()
.nullable(),
// .refine((val) => val === null || (val >= 1 && val <= 5), {
// message: 'Score must be between 1 and 5',
// }),
ATTEMPT 2:
.refine(value => value === null || value >= 1, {
message: 'Number must be greater than or equal to 1',
})
.refine(value => value === null || value <= 5, {
message: 'Number must be less than or equal to 5',
}),
ATTEMPT 3:
z.number().min(1).max(5).nullable(),

<Input
type="number"
min={1}
max={5}
{...register(name, {
valueAsNumber: false,
setValueAs: v => v === '' ? null : Number(v)
})}
data-invalid={touchedFields[name] && !!errors[name] ? 'true' : undefined}
/>
{errors[name] && (

{errors[name]?.message}

)}

I have given up trying to use zod schema validation to check that it is a number between 1-5. None of the 3 attempts I have made above work.

Can anyone offer suggestions on what else I might try to allow null values in an input field -or alternatively check if the number is in the range?

I think part of the issue is that the form imposes a default value of 0. I've tried handling that and treating it is null, but it doesn't help to solve this.

<Input
type="number"
min={1}
max={5}
{...register(name, {
valueAsNumber: false,
setValueAs: v => v === 0 ? null : Number(v)
})}
data-invalid={touchedFields[name] && !!errors[name] ? 'true' : undefined}
/>

[burakcankrpnr]

I think the simplest approach is to keep the input value nullable in the form state, but handle the validation separately in the schema.

For example, you can allow null in the form value and then validate the actual number only when a value is provided:

const schema = z.object({
  value: z
    .number()
    .min(1)
    .max(5)
    .nullable(),
});

onChange={(e) => {
  const value = e.target.value;
  field.onChange(value === "" ? null : Number(value));
}}

[ninaad-padiyarr]

Your third schema, z.number().min(1).max(5).nullable(), already expresses the requested validation. The other part is translating the HTML input's empty string into null, and initializing the form with null rather than 0.

Here is a complete native-input example expanding on the earlier Controller suggestion:

import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
const schema = z.object({ scientific_merit_score: z.number().min(1).max(5).nullable() });
export function ScoreForm() {
 const {control,handleSubmit}=useForm<z.infer<typeof schema>>({resolver:zodResolver(schema),defaultValues:{scientific_merit_score:null}});
 return <form noValidate onSubmit={handleSubmit(console.log)}>
 <Controller name="scientific_merit_score" control={control} render={({field,fieldState})=><>
 <label htmlFor="score">Scientific merit score</label>
 <input id="score" type="number" min={1} max={5} step="any" name={field.name} ref={field.ref} onBlur={field.onBlur} value={field.value ?? ""} onChange={e=>field.onChange(e.target.value===""?null:e.target.valueAsNumber)} aria-invalid={!!fieldState.error} aria-describedby={fieldState.error?"score-error":undefined}/>
 {fieldState.error && <p id="score-error">{fieldState.error.message}</p>}
 </>}/><button type="submit">Save</button></form>;
}

field.value ?? "" displays null as a blank input while preserving numeric zero, so entering 0 correctly fails validation instead of silently becoming empty. Clearing the input stores null. noValidate makes this example use the resolver's validation messages instead of the browser blocking submission first. If only integers are allowed, add .int() to the schema and change step to 1.

This example passed TypeScript checks; schema checks accepted null, 1, 5, and 3.5, and rejected 0, 6, and NaN. I have not reproduced your custom Input, so check that it forwards ref, name, value, onChange, and onBlur if you replace the native input. Controller handles this field; do not also spread register() onto it.

Controller documentation

Prepared and checked with AI assistance.

[kirlyr]

I think your schema is already close to correct. The important distinction is between an empty HTML input, which produces "", and a nullable form value, which should be null.

I'd handle this at the input boundary and ensure the default value is actually null, not 0.

const schema = z.object({
  scientific_merit_score: z
    .number()
    .min(1, "Minimum score is 1")
    .max(5, "Maximum score is 5")
    .nullable(),
});

type FormValues = z.infer<typeof schema>;

const { register, handleSubmit } = useForm<FormValues>({
  resolver: zodResolver(schema),
  defaultValues: {
    scientific_merit_score: null,
  },
});

Then register the input with a transformation:

<input
  type="number"
  min={1}
  max={5}
  {...register("scientific_merit_score", {
    setValueAs: value =>
      value === "" ? null : Number(value),
  })}
/>

The expected behavior is:

• Empty input → null → valid
• 1 through 5 → valid numbers
• 0, 6, or other out-of-range numbers → validation error
• Invalid numeric content → rejected by the number schema

One thing I'd double-check in your original example: if defaultValues contains scientific_merit_score: 0, the field starts with 0, not null. Changing the conversion logic won't automatically fix that initial value.

Also, avoid using valueAsNumber: true alongside setValueAs, since valueAsNumber takes precedence over that custom transformation.

If you're using a controlled UI component with Controller, convert the empty string to null inside field.onChange instead, and use value={field.value ?? ""} for the displayed value.

Hope that helps clarify where the conversion needs to happen!