From 3d55a0334aa7c75cb0dad4d7b36a3b4f6bde92cf Mon Sep 17 00:00:00 2001
From: BasilFoubert <74461731+BasilFoubert@users.noreply.github.com>
Date: Tue, 16 Jun 2026 06:57:56 +0200
Subject: [PATCH] fix: improve remember me checkbox UX in login form (#16051)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What problem does this PR solve?

## What
- Add `group` class to wrapper div to enable hover state coordination
- Apply hover styles to checkbox via group-hover
- Make FormLabel clickable via onClick toggle + cursor-pointer
- Fix label color logic: disabled vs primary state

## Why
The "Remember me" label was not clickable and had no hover feedback,
making the UX inconsistent with standard checkbox behavior.

## How to test
0. Go to the demo video before/after attached below
1. Go to the login page
2. Click directly on the "Remember me" label → should toggle the
checkbox
3. Hover over the checkbox area → should show hover styles

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

## Before


https://github.com/user-attachments/assets/bd47d45c-09ea-437f-bd98-3397ce040c1e

## After


https://github.com/user-attachments/assets/45c65d1a-bec7-4ad6-8f1c-d149f7296f8f
---
 web/src/pages/login-next/index.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/web/src/pages/login-next/index.tsx b/web/src/pages/login-next/index.tsx
index 908451330e..2d425aa727 100644
--- a/web/src/pages/login-next/index.tsx
+++ b/web/src/pages/login-next/index.tsx
@@ -149,24 +149,25 @@ function LoginFormContent({
                   name="remember"
                   render={({ field }) => (
                     <FormItem>
-                      <FormControl>
-                        <div className="flex gap-2">
+                      <div className="flex gap-2 group">
+                        <FormControl>
                           <Checkbox
                             checked={field.value}
                             onCheckedChange={(checked) => {
                               field.onChange(checked);
                             }}
+                            className="group-hover:border-border-default group-hover:bg-border-button"
                           />
-                          <FormLabel
-                            className={cn(' hover:text-text-primary', {
-                              'text-text-disabled': !field.value,
-                              'text-text-primary': field.value,
-                            })}
-                          >
-                            {t('rememberMe')}
-                          </FormLabel>
-                        </div>
-                      </FormControl>
+                        </FormControl>
+                        <FormLabel
+                          className={cn('cursor-pointer', {
+                            'text-text-disabled': !field.value,
+                            'text-text-primary': field.value,
+                          })}
+                        >
+                          {t('rememberMe')}
+                        </FormLabel>
+                      </div>
                       <FormMessage />
                     </FormItem>
                   )}