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) {