diff --git a/app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_Context_Bug_Fixes.js b/app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_Context_Bug_Fixes.js
index 341a83185c6f..69f0fbaf8d3b 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_Context_Bug_Fixes.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_Context_Bug_Fixes.js
@@ -27,4 +27,4 @@ describe("Canvas context Property Pane", { tags: ["@tag.IDE"] }, function () {
     //check if the entities are expanded
     cy.get(`[data-guided-tour-id="explorer-entity-Image1"]`).should("exist");
   });
-});
+});
\ No newline at end of file
diff --git a/app/client/src/assets/icons/alert/warning-error.svg b/app/client/src/assets/icons/alert/warning-error.svg
new file mode 100644
index 000000000000..69d06d875b24
--- /dev/null
+++ b/app/client/src/assets/icons/alert/warning-error.svg
@@ -0,0 +1 @@
+<svg fill="#ff0000" height="14" width="14" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" stroke="#ff0000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M256,127.996c-7.074,0-12.8,5.726-12.8,12.8v204.8c0,7.074,5.726,12.8,12.8,12.8c7.074,0,12.8-5.726,12.8-12.8v-204.8 C268.8,133.722,263.074,127.996,256,127.996z"></path> </g> </g> <g> <g> <path d="M508.57,442.731L278.17,43.669c-4.574-7.919-13.022-12.8-22.17-12.8s-17.596,4.881-22.17,12.8L3.43,442.731 c-4.574,7.919-4.574,17.681,0,25.6c4.574,7.919,13.022,12.8,22.17,12.8h460.8c9.148,0,17.596-4.881,22.17-12.8 S513.143,450.65,508.57,442.731z M25.605,455.522L256,56.461l230.4,399.061H25.605z"></path> </g> </g> <g> <g> <circle cx="256" cy="409.596" r="25.6"></circle> </g> </g> </g></svg>
\ No newline at end of file
diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx
index 672ff159d680..a7a9ab5c1e29 100644
--- a/app/client/src/components/propertyControls/KeyValueComponent.tsx
+++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx
@@ -6,6 +6,7 @@ import { Button } from "design-system";
 import { generateReactKey } from "utils/generators";
 import { debounce } from "lodash";
 import { getNextEntityName } from "utils/AppsmithUtils";
+import { ReactComponent as WarningErrorIcon } from "assets/icons/alert/warning-error.svg";
 
 function updateOptionLabel<T>(
   options: Array<T>,
@@ -38,11 +39,51 @@ function updateOptionValue<T>(
     };
   });
 }
+const FlexBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const ErrorMessageBox = styled.div`
+  color: ${(props) => props.theme.colors.error};
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0;
+  margin-bottom: 12px;
+`;
 
 const StyledBox = styled.div`
   width: 10px;
 `;
 
+const StyledInputGroup = styled(InputGroup)<{ hasError: boolean }>`
+  > .ads-v2-input__input-section > div {
+    min-width: 0px;
+  }
+  & input {
+    ${(props) =>
+      props.hasError &&
+      `
+      border-color: ${props.theme.colors.error};
+    `}
+    ${(props) =>
+      !props.hasError &&
+      `
+      border-color: #cdd5df;
+      &:focus {
+        border-color: #4c5664;
+      }
+      &:hover {
+        border-color: #99a4b3;
+      }
+    `}
+  }
+`;
+
 type UpdatePairFunction = (
   pair: SegmentedControlOption[],
   isUpdatedViaKeyboard?: boolean,
@@ -58,17 +99,12 @@ type SegmentedControlOptionWithKey = SegmentedControlOption & {
   key: string;
 };
 
-const StyledInputGroup = styled(InputGroup)`
-  > .ads-v2-input__input-section > div {
-    min-width: 0px;
-  }
-`;
-
 export function KeyValueComponent(props: KeyValueComponentProps) {
   const [renderPairs, setRenderPairs] = useState<
     SegmentedControlOptionWithKey[]
   >([]);
   const [typing, setTyping] = useState<boolean>(false);
+  const [errorMessages, setErrorMessages] = useState<string[]>([]);
   const { pairs } = props;
   useEffect(() => {
     let { pairs } = props;
@@ -84,6 +120,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     );
 
     pairs.length !== 0 && !typing && setRenderPairs(newRenderPairs);
+    validatePairs(newRenderPairs);
   }, [props, pairs.length, renderPairs.length]);
 
   const debouncedUpdatePairs = useCallback(
@@ -105,6 +142,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
 
     setRenderPairs(updatedRenderPairs);
     debouncedUpdatePairs(updatedPairs);
+    validatePairs(updatedRenderPairs);
   }
 
   function updateValue(index: number, updatedValue: string) {
@@ -119,6 +157,17 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
 
     setRenderPairs(updatedRenderPairs);
     debouncedUpdatePairs(updatedPairs);
+    validatePairs(updatedRenderPairs);
+  }
+
+  function validatePairs(pairs: SegmentedControlOptionWithKey[]) {
+    const newErrorMessages = pairs.map((pair) => {
+      if (!pair.label && !pair.value) {
+        return "Both Name and Value can't be empty";
+      }
+      return "";
+    });
+    setErrorMessages(newErrorMessages);
   }
 
   function deletePair(index: number, isUpdatedViaKeyboard = false) {
@@ -129,6 +178,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     const newRenderPairs = renderPairs.filter((o, i) => i !== index);
 
     setRenderPairs(newRenderPairs);
+    validatePairs(newRenderPairs);
     props.updatePairs(newPairs, isUpdatedViaKeyboard);
   }
 
@@ -162,6 +212,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
     });
 
     setRenderPairs(updatedRenderPairs);
+    validatePairs(updatedRenderPairs);
     props.updatePairs(pairs, e.detail === 0);
   }
 
@@ -176,42 +227,52 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
   return (
     <>
       {renderPairs.map((pair: SegmentedControlOptionWithKey, index) => {
+        const hasError = !!errorMessages[index];
         return (
-          <ControlWrapper key={pair.key} orientation={"HORIZONTAL"}>
-            <StyledInputGroup
-              dataType={"text"}
-              onBlur={onInputBlur}
-              onChange={(value: string) => {
-                updateKey(index, value);
-              }}
-              onFocus={onInputFocus}
-              placeholder={"Name"}
-              // @ts-expect-error fix this the next time the file is edited
-              value={pair.label}
-            />
-            <StyledBox />
-            <StyledInputGroup
-              dataType={"text"}
-              onBlur={onInputBlur}
-              onChange={(value: string) => {
-                updateValue(index, value);
-              }}
-              onFocus={onInputFocus}
-              placeholder={"Value"}
-              value={pair.value}
-            />
-            <StyledBox />
-            <Button
-              isIconButton
-              kind="tertiary"
-              onClick={(e: React.MouseEvent) => {
-                deletePair(index, e.detail === 0);
-              }}
-              size="sm"
-              startIcon="delete-bin-line"
-              style={{ width: "50px" }}
-            />
-          </ControlWrapper>
+          <FlexBox key={pair.key}>
+            <ControlWrapper orientation={"HORIZONTAL"}>
+              <StyledInputGroup
+                dataType={"text"}
+                hasError={hasError}
+                onBlur={onInputBlur}
+                onChange={(value: string) => {
+                  updateKey(index, value);
+                }}
+                onFocus={onInputFocus}
+                placeholder={"Name"}
+                value={pair.label}
+              />
+              <StyledBox />
+              <StyledInputGroup
+                dataType={"text"}
+                hasError={hasError}
+                onBlur={onInputBlur}
+                onChange={(value: string) => {
+                  updateValue(index, value);
+                }}
+                onFocus={onInputFocus}
+                placeholder={"Value"}
+                value={pair.value}
+              />
+              <StyledBox />
+              <Button
+                isIconButton
+                kind="tertiary"
+                onClick={(e: React.MouseEvent) => {
+                  deletePair(index, e.detail === 0);
+                }}
+                size="sm"
+                startIcon="delete-bin-line"
+                style={{ width: "50px" }}
+              />
+            </ControlWrapper>
+            {errorMessages[index] && (
+              <ErrorMessageBox>
+                <WarningErrorIcon />
+                {errorMessages[index]}
+              </ErrorMessageBox>
+            )}
+          </FlexBox>
         );
       })}
 
diff --git a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx
index 15fe153a9955..2da4610337cf 100644
--- a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx
+++ b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx
@@ -70,6 +70,16 @@ export function optionsCustomValidation(
         break;
       }
 
+      if (!label && !value) {
+        _isValid = false;
+        message = {
+          name: "ValidationError",
+          message:
+            "Both Name and Value can't be empty",
+        };
+        break;
+      }
+
       //Check if the required field "label" is present:
       if (!label) {
         _isValid = false;