Allow firing an event (e.g. clicking) on the checkbox's label (#22488)

frontend/src/metabase/core/components/CheckBox/CheckBox.tsx

@@ -37,6 +37,7 @@ function CheckboxTooltip({
 
 const CheckBox = forwardRef<HTMLLabelElement, CheckBoxProps>(function Checkbox(
   {
+    name,
     label,
     labelEllipsis = false,
     checked,
@@ -74,6 +75,7 @@ const CheckBox = forwardRef<HTMLLabelElement, CheckBoxProps>(function Checkbox(
           onChange={isControlledCheckBoxInput ? onChange : undefined}
           onFocus={onFocus}
           onBlur={onBlur}
+          id={name}
         />
         <CheckBoxContainer disabled={disabled}>
           <CheckBoxIconContainer

frontend/src/metabase/core/components/CheckBox/types.ts

@@ -26,6 +26,7 @@ export interface CheckBoxLabelProps {
 
 export interface CheckBoxProps
   extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "onFocus" | "onBlur"> {
+  name?: string;
   label?: ReactNode;
   labelEllipsis?: boolean;
   checked?: boolean;

frontend/test/metabase/scenarios/onboarding/auth/signin.cy.spec.js

@@ -53,6 +53,16 @@ describe("scenarios > auth > signin", () => {
     cy.contains(/[a-z ]+, Bob/i);
   });
 
+  it("should allow toggling of Remember Me", () => {
+    cy.visit("/auth/login");
+
+    // default initial state
+    cy.findByRole("checkbox").should("be.checked");
+
+    cy.findByLabelText("Remember me").click();
+    cy.findByRole("checkbox").should("not.be.checked");
+  });
+
   it("should redirect to a unsaved question after login", () => {
     cy.signInAsAdmin();
     cy.visit("/");