v6: Looking for example to useFieldArray() and multiple checkboxes

[ZipBrandon]

I'm attempting, and failing, at creating a simple multiselection example with rvf@6. I am trying to use controlled props and/or useFieldArray() but I am doing something incorrectly. Can someone create a small example with the pizza toppings example that uses rvf v6?

[airjp73]

Should work about the same as v5.

Set default value with an array of strings:

pizzaToppings: ["pepperoni", "mushroom"]

Then wire up some regular checkboxes.

const field = form.field("pizzaToppings"); // or useField or pass the name to getInputProps

// ...
<input {...field.getInputProps({ type: "checkbox", value: "pepperoni" })} />
<input {...field.getInputProps({ type: "checkbox", value: "mushroom" })} />
<input {...field.getInputProps({ type: "checkbox", value: "onion" })} />

Then when it comes to validation keep in mind that, if one checkbox is checked (assuming you're not using submitSource: state), the validator will receive a single string instead of an array of strings. Which you can handle gracefully with repeatable from zod-form-data.

More details here: https://www.rvf-js.io/input-types#checkboxes-and-checkbox-groups

If you need more help, I can flesh out the example a bit more later, I just threw something together on my phone real quick haha.

[ZipBrandon]

@airjp73 Thanks! Good sanity check! Where I went wrong was not having the array as the default value. I had no default value for it. I was under the impression that the zod schema would dictate the shape.