How do I make a group of checkbox inputs have at least one required?

[georgec-travellocal]

I am registering a group of checkboxes, but if I put { required: true }, all checkboxes are required to be checked. How can I set it so at least one of a group of checkboxes have been checked?

Here is one of the inputs:

<input
        {...props}
        {...register}
        id={register.name}
        type="checkbox"
        className="image-select__input u-visually-hidden"
/>

The css makes it visually hidden. Elsewhere we show a checkmark.

I'm not sure setting id to register.name is a good idea but names are unique for checkboxes so it should be ok (my colleague wrote that).

register is a prop we pass in with something like:

register={methods.register(name, {
      required: false,
})}

[jvgeee]

I think the easiest way to do this is just to handle validation yourself on submit, e.g: (nb, not real code, just an example)

function App(){

const formControls = useForm({
   defaultValues: {
       selectedOptions: []
  }
})

// Submit handler

function onSubmit(){
    const { selectedOptions } = formControls.getValues()
   // Create an error if no values
   if (!selectedOptions?.length) {
       return formControls.setError("selectedOptions", {message: "Please select at least one item"})
   }

   // otherwise succeed
    

}


return <Controller
    name="selectedOptions"
   control={formControls.control}
   render={({field}) => <Checkbox {...field} />}
  />

  <Button onPress={onSubmit} text="Submit" />
}

[georgec-travellocal]

I solved it by passing a validate function and checking if at least one checkbox was checked (using the second argument) and nested objects.