From 316f2df170862c5e3bdd4f1b69fb143275bd8916 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 2 Nov 2023 14:05:47 +0100
Subject: [PATCH] Fix checkbox htmlfor bug (#2315)

fix bug
---
 front/src/modules/ui/input/components/Checkbox.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/front/src/modules/ui/input/components/Checkbox.tsx b/front/src/modules/ui/input/components/Checkbox.tsx
index 1de02defa..661651c7f 100644
--- a/front/src/modules/ui/input/components/Checkbox.tsx
+++ b/front/src/modules/ui/input/components/Checkbox.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
+import { v4 } from 'uuid';
 
 import { IconCheck, IconMinus } from '@/ui/display/icon';
 
@@ -130,11 +131,14 @@ export const Checkbox = ({
     setIsInternalChecked(event.target.checked);
   };
 
+  const checkboxId = 'checkbox' + v4();
+
   return (
     <StyledInputContainer>
       <StyledInput
         autoComplete="off"
         type="checkbox"
+        id={checkboxId}
         name="styled-checkbox"
         data-testid="input-checkbox"
         checked={isInternalChecked}
@@ -145,7 +149,7 @@ export const Checkbox = ({
         isChecked={isInternalChecked}
         onChange={handleChange}
       />
-      <label htmlFor="checkbox">
+      <label htmlFor={checkboxId}>
         {indeterminate ? (
           <IconMinus />
         ) : isInternalChecked ? (