make label part of checkbox

src/app/ui/forms/login-form.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import styles from '@/app/styles/login.module.scss'
-import { useActionState, useState } from 'react';
+import { useActionState, useState, useRef } from 'react';
 import { authorization } from '@/app/actions/auth';
 import { useTranslations } from 'next-intl';
 import { IconEye } from '@/app/ui/icons/icons';
@@ -27,6 +27,8 @@ export default function LoginForm() {
 		setShowPassword(false);
 	}
 
+	const checkBoxRememberMe = useRef<HTMLInputElement>(null);
+
 	return (
 		<form action={formAction}>
 			<div className={`${styles['form-group']}`}>
@@ -82,8 +84,15 @@ export default function LoginForm() {
 			)}
 			<div className={`${styles['form-options']}`}>
 				<div className={`${styles['form-checkbox']}`}>
-					<input type="checkbox" id="remember" name="remember" />
+					<input type="checkbox" id="remember" name="remember" ref={checkBoxRememberMe} />
-					<label>
+					<label
+						onClick={() => {
+							if (checkBoxRememberMe.current) {
+								checkBoxRememberMe.current.click();
+							}
+						}}
+						className="select-none"
+					>
 						{t('remember-me')}
 					</label>
 				</div>