From 25a97e34c7a5e581dc3e3f89e021e58cb9e0ab50 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 11:54:57 +0700
Subject: [PATCH] refactor(FE-114): use React's useId hook for generating
 unique checkbox IDs in CheckboxInput

---
 src/components/input/CheckboxInput.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
index b8d5ba5e..8ee202db 100644
--- a/src/components/input/CheckboxInput.tsx
+++ b/src/components/input/CheckboxInput.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+import { ChangeEventHandler, FocusEventHandler, ReactNode, useId } from 'react';
 
 import { cn } from '@/lib/helper';
 import FieldMessage from '@/components/helper/FieldMessage';
@@ -101,8 +101,9 @@ const CheckboxInput = ({
     error: 'checkbox-error',
   };
 
-  // Generate unique ID for accessibility
-  const checkboxId = `checkbox-${name}-${Math.random().toString(36).substr(2, 9)}`;
+  // Generate unique ID for accessibility using React's useId hook for SSR compatibility
+  const generatedId = useId();
+  const checkboxId = `checkbox-${name}-${generatedId}`;
 
   // Naked mode - only checkbox, no wrapper structure
   if (naked) {