mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-22 01:03:39 +01:00
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 <kipras@kipras.org>
This commit is contained in:
parent
ce35a2d0ab
commit
4e4ae0a7d0
components/common
@ -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
|
||||
|
@ -17,6 +17,7 @@
|
||||
|
||||
.label {
|
||||
margin-left: 10px;
|
||||
user-select: none; /* disable text selection when clicking to toggle the checkbox */
|
||||
}
|
||||
|
||||
.input {
|
||||
|
Loading…
Reference in New Issue
Block a user