Default value for string union type

[dioScar90]

How can you use string union values? I have this schema:

const form = useRegisterForm({
  defaultValues: {
    email: '',
    profile: {
      gender: '',
    },
  },
  validators: {
    onSubmit: z.object({
      email: z.string().email(),
      profile: z.object({
        gender: z.enum(['Female', 'Male']),
      }),
    }),
  },
  onSubmit: async ({ value }) => {
    // do stuff
  },
})

But this way the gender prop in onSubmit -> value func does not come with the appropriated type (I mean: 'Female' | 'Male'), it cames with 'string' instead.

If I set gender: undefined then the validator warns a message because gender does not accept undefined; if I simply remove gender from deafultValues, then the validator doesn't warns any message, but this way gender does not appear in onSubmit -> value type.

What would you do in this case?

[juanvilladev]

can you define your zodSchema separately like this:

const Schema = z.object({
  email: z.string().email(),
  profile: z.object({
    gender: z.enum(["Female", "Male"]),
  }),
});

type TSchemaInput = z.input<typeof Schema>; 
type TSchemaOutput = z.output<typeof Schema>;

Then for default values you should set cast the values to as TSchemaInput

...
  defaultValues: {
    email: '',
    profile: {
      gender: '',
    },
  } as TSchemaInput // important to use input here
  validators: {
    onSubmit: Schema
  }
...

You'll have the inference you need. Now I do notice you want to initiate the value as an empty string. This will result in a type error since an empty string is not part of your enum. To support this you'll want to update your schema to something like:

const Schema = z.object({
  email: z.string().email(),
  profile: z.object({
    gender: z.enum(["male", "female", ""]).refine((val) => val != "", { message: "required" }),
  }),
});

What's really nice is that the refine will add type safety. So when you hover over TSchemaOutput, you'll see that the enum value excludes the empty string.