diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx b/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx
index 1b1af1e59ac0..760b7625ee2a 100644
--- a/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx
+++ b/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import React, { useId } from 'react';
 
 interface TextInputProps {
   label?: string;
@@ -18,7 +18,7 @@ const StyledContainer = styled.div<{ fullWidth?: boolean }>`
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 `;
 
-const StyledLabel = styled.span`
+const StyledLabel = styled.label`
   color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
@@ -65,12 +65,15 @@ const TextInput: React.FC<TextInputProps> = ({
   placeholder,
   icon,
 }) => {
+  const inputId = useId();
+
   return (
     <StyledContainer fullWidth={fullWidth}>
-      {label && <StyledLabel>{label}</StyledLabel>}
+      {label && <StyledLabel htmlFor={inputId}>{label}</StyledLabel>}
       <StyledInputContainer>
         {icon && <StyledIcon>{icon}</StyledIcon>}
         <StyledInput
+          id={inputId}
           type="text"
           value={value}
           onChange={(e) => onChange(e.target.value)}
diff --git a/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx b/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
index 103036b7cfd7..fd3327c63f23 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 import { IconCheck, IconMinus } from 'twenty-ui';
-import { v4 } from 'uuid';
 
 export enum CheckboxVariant {
   Primary = 'primary',
@@ -165,7 +164,7 @@ export const Checkbox = ({
     setIsInternalChecked(event.target.checked ?? false);
   };
 
-  const checkboxId = 'checkbox' + v4();
+  const checkboxId = React.useId();
 
   return (
     <StyledInputContainer
diff --git a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx b/packages/twenty-front/src/modules/ui/input/components/Radio.tsx
index 5530aaa3a332..0d41ca1f8304 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Radio.tsx
@@ -3,7 +3,6 @@ import { motion } from 'framer-motion';
 import * as React from 'react';
 import { RGBA } from 'twenty-ui';
 
-import { v4 } from 'uuid';
 import { RadioGroup } from './RadioGroup';
 
 export enum RadioSize {
@@ -134,7 +133,7 @@ export const Radio = ({
     onCheckedChange?.(event.target.checked);
   };
 
-  const optionId = v4();
+  const optionId = React.useId();
 
   return (
     <StyledContainer className={className} labelPosition={labelPosition}>
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
index cf4b06f6aba9..1f64b2adc55b 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
@@ -6,6 +6,7 @@ import {
   ForwardedRef,
   InputHTMLAttributes,
   forwardRef,
+  useId,
   useRef,
   useState,
 } from 'react';
@@ -21,7 +22,7 @@ const StyledContainer = styled.div<
   width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
 `;
 
-const StyledLabel = styled.span`
+const StyledLabel = styled.label`
   color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
@@ -169,9 +170,15 @@ const TextInputV2Component = (
     setPasswordVisible(!passwordVisible);
   };
 
+  const inputId = useId();
+
   return (
     <StyledContainer className={className} fullWidth={fullWidth ?? false}>
-      {label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
+      {label && (
+        <StyledLabel htmlFor={inputId}>
+          {label + (required ? '*' : '')}
+        </StyledLabel>
+      )}
       <StyledInputContainer>
         {!!LeftIcon && (
           <StyledLeftIconContainer>
@@ -181,6 +188,7 @@ const TextInputV2Component = (
           </StyledLeftIconContainer>
         )}
         <StyledInput
+          id={inputId}
           data-testid={dataTestId}
           autoComplete={autoComplete || 'off'}
           ref={combinedRef}
diff --git a/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx b/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx
index eeceaee8934e..39bafac99582 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx
@@ -69,11 +69,14 @@ export const Toggle = ({
   };
 
   useEffect(() => {
-    if (value !== isOn) {
-      setIsOn(value ?? false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+    setIsOn((isOn) => {
+      if (value !== isOn) {
+        return value ?? false;
+      }
+
+      return isOn;
+    });
+  }, [value, setIsOn]);
 
   return (
     <StyledContainer