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
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