Handle checkboxes with Zod?

[kentcdodds]

Does conform do anything to coerce a checkbox to a boolean when using a Zod schema?

[brandonpittman]

I don't believe so. I borrowed zod-form-data's .checkbox method.

https://github.com/airjp73/remix-validated-form/blob/f430df7c2ee743bc2017831892afca5472f30f35/packages/zod-form-data/src/helpers.ts#L79-L83

[edmundhung]

Conform does not coerce anything as there is no easy way to determine if the form data was set with a checkbox from the server.

You can set it up as z.string().transform(value => value === 'on') or z.preprocess(value => value === 'on', z.boolean()) based on your preference.

[edmundhung]

You can now use z.boolean() for required checkbox and z.boolean().optional() for optional checkbox from v0.8.0.

[kentcdodds]

Sweet!

[luanfonsecap]

How can i validate if at least one checkbox is checked? Any suggestions?

[edmundhung]

@luanfonsecap It sounds like you are validating a list of checkboxes. In this case I will define a string array schema with a nonEmpty check.

[binajmen]

@luanfonsecap It sounds like you are validating a list of checkboxes. In this case I will define a string array schema with a nonEmpty check.

But if you only select one checkbox, it becomes a string instead of an array of one value 🤔

[edmundhung]

Yep. It will be a string instead of an array of there is only 1 item. But it should work fine because of the automatic type coercion feature with zod which will transform it to an array before validating it.

[timzolleis]

Is there an option to use z.boolean inside nested objects? Lets say I have:

const schema = z.object({
  entries: z.array(z.object({
    secret: z.boolean().optional()
  })
})

Which does not transform the checkboxes to booleans (even though they have the correct name) - im using it with "transform" right now. Is this a know bug or by design?

[edmundhung]

@timzolleis It might be related to #391 if you have no other text inputs inside the object.