Using zod form validation with radio button group that has no default checked value on first render #3640

sherrellbc · 2024-07-13T15:58:55Z

sherrellbc
Jul 13, 2024

I have a simple form that I am using zod to validate. For simplicity let's say the form has exactly one user field for specifying a selection:

const FormSchema = z.object({
    options: z.enum(["option-0", "option-1", "option-2"], {
        required_error: "You must select an option",
    })
})

export default function Form() {
    const form = useForm < z.infer < typeof FormSchema >> ({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            options: "",
        },
    })

    const  (data: z.infer<typeof FormSchema>) => {
        console.log(data)
    }, [])

    return (
            <form  
            ...
            </form>
    )
}

The above code does not work since "" is not in the set of options specified in the FormSchema.

Is there a way to:

Have no radio buttons selected on first render
Still use zod validation onSubmit to ensure the value for the radio button group is within the set specified?

lpknv · 2024-10-23T07:33:57Z

lpknv
Oct 23, 2024

Interesting, this is the exact situation I am in right now.

0 replies

shehabadel · 2024-11-19T22:42:37Z

shehabadel
Nov 19, 2024

I am facing the same issue, but I thought it could be something like this where we union the field with z.literal("")

For example,

 z.union([
    z.enum(["option-0", "option-1", "option-2"].optional(),
    z.literal(""),
  ])

0 replies

potatohoney-p · 2026-10-31T15:08:36Z

potatohoney-p
Oct 31, 2026

You can allow "" in the form input type, then pipe it into the required enum so it can never be submitted successfully. Unioning with z.literal("") alone would make the empty selection valid.

With Zod 4:

const choices = ["option-0", "option-1", "option-2"] as const;
const selected = z.enum(choices, {
  error: "You must select an option",
});
const FormSchema = z.object({
  options: selected.or(z.literal("")).pipe(selected),
});

type Input = z.input<typeof FormSchema>;
type Output = z.output<typeof FormSchema>;

const form = useForm<Input, unknown, Output>({
  resolver: zodResolver(FormSchema),
  defaultValues: { options: "" },
});

// Inside the form:
{choices.map(value => (
  <label key={value}>
    <input type="radio" value={value} {...form.register("options")} />
    {value}
  </label>
))}

None of those native radio values matches "", so leave checked/defaultChecked unset. handleSubmit's successful callback receives Output, whose options is only the three enum values. An empty submission instead produces the selection error. For a controlled/custom radio component, wire its value/change handler through Controller rather than mixing the native register example with a separate controlled value.

For Zod 3, the same pipeline works; replace the enum options with { errorMap: () => ({ message: "You must select an option" }) }.

Verified with Zod 3.25.76 / 4.6.7, React Hook Form 7.65.0, resolvers 5.2.2 and strict TypeScript 5.9.3: empty/invalid input fails, all three choices pass, and createFormControl rejects empty submit, accepts a selected value, then rejects again after reset. This checks schema/resolver/form-control behavior, not your particular radio widget's rendered UI.

The resolver documentation describes the separate input/output generics.

0 replies

Navigation Menu

Repository navigation

Using zod form validation with radio button group that has no default checked value on first render #3640

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Using zod form validation with radio button group that has no default checked value on first render #3640

Uh oh!

Uh oh!

sherrellbc Jul 13, 2024

Replies: 3 comments

Uh oh!

lpknv Oct 23, 2024

Uh oh!

shehabadel Nov 19, 2024

Uh oh!

potatohoney-p Oct 31, 2026

sherrellbc
Jul 13, 2024

lpknv
Oct 23, 2024

shehabadel
Nov 19, 2024

potatohoney-p
Oct 31, 2026