diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 0c83eefff..6ab25b026 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -18,6 +18,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
   const [type, setType] = useState("");
+  const [fields, setFields] = useState<string[]>([]);
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
@@ -91,6 +92,14 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             placeholder="Insert a value for the variable..."
             className="w-full resize-none custom-scroll"
           />
+          <Label>Apply To Fields (optional)</Label>
+          <InputComponent
+            setSelectedOptions={(value) => setFields(value)}
+            selectedOptions={fields}
+            password={false}
+            options={Array.from(componentFields)}
+            placeholder="Choose a type for the variable..."
+          ></InputComponent>
         </div>
       </BaseModal.Content>
       <BaseModal.Footer>
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index bd7f852ab..4f3a207cc 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -33,6 +33,8 @@ export default function InputComponent({
   optionsIcon = "ChevronsUpDown",
   selectedOption,
   setSelectedOption,
+  selectedOptions = [],
+  setSelectedOptions,
   options = [],
   optionsPlaceholder = "Search options...",
   optionsButton,
@@ -101,13 +103,18 @@ export default function InputComponent({
                 value={
                   (selectedOption !== "" || !onChange) && setSelectedOption
                     ? selectedOption
+                    : (selectedOptions?.length !== 0 || !onChange) &&
+                      setSelectedOptions
+                    ? selectedOptions?.join(", ")
                     : value
                 }
                 autoFocus={autoFocus}
                 disabled={disabled}
                 onClick={() => {
-                  (selectedOption !== "" || !onChange) &&
-                    setSelectedOption &&
+                  (((selectedOption !== "" || !onChange) &&
+                    setSelectedOption) ||
+                    ((selectedOptions?.length !== 0 || !onChange) &&
+                      setSelectedOptions)) &&
                     setShowOptions(true);
                 }}
                 required={required}
@@ -119,9 +126,11 @@ export default function InputComponent({
                     ? " text-clip password "
                     : "",
                   editNode ? " input-edit-node " : "",
-                  password && setSelectedOption ? "pr-[62.9px]" : "",
-                  (!password && setSelectedOption) ||
-                    (password && !setSelectedOption)
+                  password && (setSelectedOption || setSelectedOptions)
+                    ? "pr-[62.9px]"
+                    : "",
+                  (!password && (setSelectedOption || setSelectedOptions)) ||
+                    (password && !(setSelectedOption || setSelectedOptions))
                     ? "pr-8"
                     : "",
 
@@ -184,7 +193,15 @@ export default function InputComponent({
                                 ? ""
                                 : currentValue
                             );
-                          setShowOptions(false);
+                          setSelectedOptions &&
+                            setSelectedOptions(
+                              selectedOptions?.includes(currentValue)
+                                ? selectedOptions.filter(
+                                    (item) => item !== currentValue
+                                  )
+                                : [...selectedOptions, currentValue]
+                            );
+                          !setSelectedOptions && setShowOptions(false);
                         }}
                       >
                         <div className="group flex w-full items-center justify-between">
@@ -192,7 +209,8 @@ export default function InputComponent({
                             <div
                               className={cn(
                                 "relative mr-2 h-4 w-4",
-                                selectedOption === option
+                                selectedOption === option ||
+                                  selectedOptions?.includes(option)
                                   ? "opacity-100"
                                   : "opacity-0"
                               )}
@@ -228,12 +246,16 @@ export default function InputComponent({
           <div
             className={cn(
               "pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
-              (selectedOption !== "" || !onChange) && setSelectedOption
+              ((selectedOption !== "" || !onChange) && setSelectedOption) ||
+                ((selectedOptions?.length !== 0 || !onChange) &&
+                  setSelectedOptions)
                 ? ""
                 : "hidden"
             )}
             onClick={
-              (selectedOption !== "" || !onChange) && setSelectedOption
+              ((selectedOption !== "" || !onChange) && setSelectedOption) ||
+              ((selectedOptions?.length !== 0 || !onChange) &&
+                setSelectedOptions)
                 ? (e) => {
                     setShowOptions((old) => !old);
                     e.preventDefault();
@@ -245,7 +267,7 @@ export default function InputComponent({
         </>
       )}
 
-      {setSelectedOption && (
+      {(setSelectedOption || setSelectedOptions) && (
         <span
           className={cn(
             password && selectedOption === "" ? "right-8" : "right-0",
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 353443572..5bcdc911f 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -28,6 +28,8 @@ export type InputComponentType = {
   optionButton?: (option: string) => ReactElement;
   selectedOption?: string;
   setSelectedOption?: (value: string) => void;
+  selectedOptions?: string[];
+  setSelectedOptions?: (value: string[]) => void;
 };
 export type ToggleComponentType = {
   enabled: boolean;