I have a use case, where:

• When the checkbox element is checked, it should set the value of an input with a predefined one, and if it's unchecked, it should be set with a 0.
• As well, the input can be edited, so it should allow setting a new value, unchecking the checkbox (since the value at this point is not equal to the predefined one)

This is the image that represents what I'm trying to achieve.

To do that, I'm using onchange events in both html elements as I show:

<IonCheckbox slot="start" color='primary' checked={checked} onIonChange={changeCheckbox} />
<IonInput inputMode="numeric" color='light' value={inputValue} onIonChange={changeInputValue} />

The main problem with this is that when I change the checked value, it triggers the input onChange event and vice versa.

const [checked, setChecked] = useState<boolean>(true);
const [inputValue, setInputValue] = useState<string>(value);

function changeCheckbox(event: any) {
   setChecked(event.detail.checked);
   setInputValue(event.detail.checked ? value : '0');
}

function changeInputValue(event: any) {
   setInputValue(event.target.value);

   if (checked) {
     setChecked(false);
   }
}