Toggle the checkbox when clicking on the label

Pretty sure the `user-select: none` could be employed in other places aswell Signed-off-by: Kipras Melnikovas <[email protected]>
mscalessio · Mar 28, 2021 · 4e4ae0a · 4e4ae0a
1 parent ce35a2d
commit 4e4ae0a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -17,6 +17,7 @@
 
 .label {
   margin-left: 10px;
+  user-select: none; /* disable text selection when clicking to toggle the checkbox */
 }
 
 .input {