diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx
new file mode 100644
index 00000000..d21addd0
--- /dev/null
+++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.test.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import Base64BinaryComponent from "./Base64BinaryComponent";
+import userEvent from "@testing-library/user-event";
+
+describe("Base64BinaryComponent", () => {
+ it("Should render Base64BinaryComponent", async () => {
+ const handleChange = jest.fn();
+
+ render(
+
+ );
+
+ expect(screen.getByText("Base64BinaryComponent")).toBeInTheDocument();
+ expect(
+ screen.getByTestId("field-input-Base64BinaryComponent")
+ ).toBeInTheDocument();
+ });
+
+ it("Should validate input", async () => {
+ const handleChange = jest.fn();
+
+ render(
+
+ );
+
+ const base64BinaryInput = screen.getByTestId(
+ "field-input-Base64BinaryComponent"
+ ) as HTMLInputElement;
+
+ // valid base64BinaryInput
+ userEvent.type(base64BinaryInput, "abcd");
+ expect(base64BinaryInput.value).toBe("abcd");
+ expect(
+ screen.getByTestId("field-input-helper-text-Base64BinaryComponent")
+ ).toBeEmptyDOMElement();
+
+ // invalid base64BinaryInput
+ userEvent.clear(base64BinaryInput);
+ userEvent.type(base64BinaryInput, "invalid base64BinaryInput.");
+ expect(base64BinaryInput).toHaveValue("invalid base64BinaryInput.");
+ expect(
+ screen.getByTestId("field-input-helper-text-Base64BinaryComponent")
+ ).toHaveTextContent("Please enter a valid Base64Binary");
+ });
+});
diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx
new file mode 100644
index 00000000..e862f2db
--- /dev/null
+++ b/src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/Base64BinaryComponent.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { FormHelperText } from "@mui/material";
+import { TypeComponentProps } from "./TypeComponentProps";
+import { TextField } from "@madie/madie-design-system/dist/react";
+import _ from "lodash";
+
+const isBase64 = (str) => {
+ try {
+ const decoded = atob(str);
+ return decoded && new RegExp(/(\s*([0-9a-zA-Z\+\=]){4}\s*)+/).test(str);
+ } catch (err) {
+ return false;
+ }
+};
+
+const Base64BinaryComponent = ({
+ canEdit,
+ fieldRequired,
+ label = "Base64Binary",
+ value,
+ onChange,
+ structureDefinition,
+}: TypeComponentProps) => {
+ const [isValid, setValid] = useState(value ? isBase64(value) : true);
+
+ const handleChange = (base64BinaryString) => {
+ setValid(true);
+ if (isBase64(base64BinaryString)) {
+ onChange(base64BinaryString);
+ } else if (!_.isEmpty(base64BinaryString)) {
+ setValid(false);
+ }
+ };
+ return (
+ handleChange(e.target.value)}
+ helperText={
+
+ {isValid ? "" : "Please enter a valid Base64Binary"}
+
+ }
+ />
+ );
+};
+
+export default Base64BinaryComponent;