reactjsreact-hook-formreact-multiselect-checkboxes

Check a checkbox when one is checked react-hook-form


I have 3 checkboxes CheckboxA, CheckboxB, CheckboxC. If checkboxB or checkboxC are checked, I want checkboxA to be checked as well

basic checkbox example from react-hook-form https://codesandbox.io/s/cool-clarke-y8cjsw?file=/src/App.js:1792-1801

enter image description here


Solution

  • In onChange you can check if current input is not A and its value is checked so you can update your new value

    if (option !== "a" && e.target.checked) valueCopy[0] = "a";
    

    Checkboxes

    const Checkboxes = ({ options, control, name }) => {
      const { field } = useController({
        control,
        name
      });
    
      return (
        <>
          {options.map((option, index) => (
            <input
              onChange={(e) => {
                const valueCopy = [...field.value];
    
                valueCopy[index] = e.target.checked ? e.target.value : null;
                if (option !== "a" && e.target.checked) valueCopy[0] = "a";
                field.onChange(valueCopy);
              }}
              key={option}
              type="checkbox"
              checked={field.value.includes(option)}
              value={option}
            />
          ))}
        </>
      );
    };
    

    You can check in my codesandbox