diff --git a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
index 62024d831f..e4d13a32b3 100644
--- a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
+++ b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
@@ -153,6 +153,10 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
   const statusLabelList = Array.isArray(statusLabelProps) ? statusLabelProps : [statusLabelProps]
 
   const describedbyIds = useMemo(() => {
+    if (!isRoleGroup) {
+      return ''
+    }
+
     const temp = []
 
     if (helpMessage) {
@@ -169,7 +173,14 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
     }
 
     return temp.join(' ')
-  }, [helpMessage, exampleMessage, supplementaryMessage, errorMessages, managedHtmlFor])
+  }, [
+    isRoleGroup,
+    helpMessage,
+    exampleMessage,
+    supplementaryMessage,
+    errorMessages,
+    managedHtmlFor,
+  ])
   const actualErrorMessages = useMemo(() => {
     if (!errorMessages) {
       return []
@@ -191,6 +202,10 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
     }, [className, dangerouslyTitleHidden, innerMargin, isRoleGroup])
 
   useEffect(() => {
+    if (isRoleGroup) {
+      return
+    }
+
     const inputWrapper = inputWrapperRef?.current
 
     if (inputWrapper) {
@@ -205,9 +220,13 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
         input.setAttribute('id', managedHtmlFor)
       }
     }
-  }, [managedHtmlFor])
+  }, [managedHtmlFor, isRoleGroup])
 
   useEffect(() => {
+    if (isRoleGroup) {
+      return
+    }
+
     const inputWrapper = inputWrapperRef?.current
 
     if (inputWrapper) {
@@ -222,7 +241,7 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
         input.setAttribute('aria-describedby', describedbyIds)
       }
     }
-  }, [describedbyIds])
+  }, [describedbyIds, isRoleGroup])
 
   return (
     <Stack