diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index 15a1ff7367..507265f9ed 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -12,8 +12,10 @@ export const Checkbox = React.memo(
         const onClick = (event) => {
             if (!props.disabled && !props.readOnly && props.onChange) {
                 const checked = isChecked();
-
-                if (inputRef.current.checked === checked) {
+                const checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement;
+                const isInputToggled = event.target === inputRef.current;
+                const isCheckboxToggled = checkboxClicked && event.target.checked !== checked;
+                if (isInputToggled || isCheckboxToggled) {
                     const value = checked ? props.falseValue : props.trueValue;
                     props.onChange({
                         originalEvent: event,
@@ -29,7 +31,6 @@ export const Checkbox = React.memo(
                             checked: value
                         }
                     });
-                    inputRef.current.checked = !checked;
                 }
 
                 DomHandler.focus(inputRef.current);
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index 886b7bf4b7..40c887538f 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -9,14 +9,17 @@ export const RadioButton = React.memo(
         const inputRef = React.useRef(props.inputRef);
 
         const select = (e) => {
-            inputRef.current.checked = true;
             onClick(e);
         };
 
         const onClick = (e) => {
             if (!props.disabled && props.onChange) {
                 const checked = props.checked;
-                if (inputRef.current.checked === checked) {
+                const radioClicked = e.target instanceof HTMLDivElement;
+                const inputClicked = e.target === inputRef.current;
+                const isInputToggled = inputClicked && e.target.checked !== checked;
+                const isRadioToggled = radioClicked && !e.target.checked;
+                if (isInputToggled || isRadioToggled) {
                     const value = !checked;
                     props.onChange({
                         originalEvent: e,
@@ -32,7 +35,6 @@ export const RadioButton = React.memo(
                             checked: value
                         }
                     });
-                    inputRef.current.checked = value;
                 }
 
                 DomHandler.focus(inputRef.current);