diff --git a/components/common/Checkbox.js b/components/common/Checkbox.js
index 67eea80d..9b76e805 100644
--- a/components/common/Checkbox.js
+++ b/components/common/Checkbox.js
@@ -7,12 +7,14 @@ import styles from './Checkbox.module.css';
 function Checkbox({ name, value, label, onChange }) {
   const ref = useRef();
 
+  const onClick = () => ref.current.click();
+
   return (
     <div className={styles.container}>
-      <div className={styles.checkbox} onClick={() => ref.current.click()}>
+      <div className={styles.checkbox} onClick={onClick}>
         {value && <Icon icon={<Check />} size="small" />}
       </div>
-      <label className={styles.label} htmlFor={name}>
+      <label className={styles.label} htmlFor={name} onClick={onClick}>
         {label}
       </label>
       <input
diff --git a/components/common/Checkbox.module.css b/components/common/Checkbox.module.css
index 267a4054..c9a01eac 100644
--- a/components/common/Checkbox.module.css
+++ b/components/common/Checkbox.module.css
@@ -17,6 +17,7 @@
 
 .label {
   margin-left: 10px;
+  user-select: none; /* disable text selection when clicking to toggle the checkbox */
 }
 
 .input {