Can I force a single checkbox as an array value?

[hornta]

I got a form with values:

type CreateTaskInputs = {
  name: string;
  modules: string[];
};

Sometimes the form would only show a single checkbox (because there will only be one module to choose). The problem with that is that RHF doesn't give me modules as an array, but the value of that single checkbox.

When there are multiple of checkboxes it always comes as an array upon submission. Can I somehow force RHF to always give me an array of the checked values?

I imagine I could like fake register an checkbox as well as register the single checkbox so that it always will be two registrered fields.

Otherwise I would have to change my type to this, but I prefer to always work with it as an array.

type CreateTaskInputs = {
  name: string;
  modules: string[] | string;
};

[bluebill1049]

you can always build a controlled component host your own local state as an array and wrapped with useController, similar example in the doc: https://codesandbox.io/s/usecontroller-own-state-wncet2?file=/src/App.tsx https://react-hook-form.com/api/usecontroller#tipes

[hornta]

I've more or less done this but it's not connected to RHF in that regard.

The problem with the approach in the example is that it can only be tied to a single form. I got multiple form where I use this component so the inputs differ, but both forms will make use of this component.

I think I can keep this component as is and just make two new components wrapping ModuleSelectableList and connecting them in there to RHF using the useController.

export interface ModuleSelectableListProps {
  modules: Module[];
  registerProps: UseFormRegisterReturn;
}

export const ModuleSelectableList = ({
  modules,
  registerProps,
}: ModuleSelectableListProps) => {
  const { t } = useTranslation();

  return (
    <ul className={styles.moduleSelection}>
      {modules.map((module, index, list) => {
        return (
          <li key={module.id}>
            <label className={styles.listItemContent}>
              <div>
                <Switch value={module.id} {...registerProps} />
              </div>
              <div>
                <Text size="sm" weight="medium" color={newColorGrey700}>
                  {t(module.name)}
                </Text>
                {module.description && (
                  <Text size="sm" weight="regular" color={newColorGrey500}>
                    {module.description}
                  </Text>
                )}
              </div>
            </label>
            {list.length - 1 !== index && <Divider />}
          </li>
        );
      })}
    </ul>
  );
};

[Ali762]

I've had this same problem, and really wish there was a flag on register (something like {forceArray:true}.

For now, I have hackily solved it by watching the value of the thing, and if it's a string, create an array and push the string into the array. Something like this:

useEffect( ()=> {
  var tasks=watch({nest:true}).tasks
  if (typeof tasks =='string'{
    newTasks=[]
    newTasks.push(tasks)
    setValue('tasks',newTasks)
  }
 },[watch({nest:true}).tasks)

[l3ardia]

There is also another trick.
In case of just one option, I solved the problem by adding
<input type="checkbox" style="display: none" value="--" />

[ggihwa]

When I set the default values of the variable as an array, it always returns the values of the array.