How do I use checkboxes with boolean values?

[charliematters]

I'm starting from a schema which has a boolean value, and I'd like that represented by a checkbox.

I've set the type to checkbox when getting the input props, but it isn't working.

I've put a reproduction here - the value starts as true but the checkbox is unchecked

https://codesandbox.io/s/naughty-julien-rtflyw?file=/src/App.tsx

[halljus]

A few things:

1. Checkbox inputs don't actually use booleans as values, so you'd want to set the default value to "on".
   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value

2. You'll want to call parse (from @conform-to/zod) on your FormData to get the transformed version (a boolean, in this case).

   alert(JSON.stringify(parse(formData, { schema }), null, 2));
   

3. You're on a really old version of Conform in that CSB, so you may run into issues and should upgrade.

[charliematters]

1. I'm happy with the 'on' versus 'true' gap, but I was thinking that conform would handle that when you set a type of 'checkbox'. My example is a cut-down version of a larger object - do I have to manually go through and change the boolean values of the domain object when passing in to 'defaultValues', or is there a shortcut at all?

2. That's really useful - I'll update that now

3. Thanks for spotting the version - CSB seems to keep some cache of versions and it needed updating.

[halljus]

I'm not aware of a shortcut. FWIW, I expected Conform or Zod or something to handle it for me the first time I ran into it, too. 🤷‍♂️