diff --git a/packages/ui/src/components/Form/customField/TypeaheadEditor.test.tsx b/packages/ui/src/components/Form/customField/TypeaheadEditor.test.tsx
new file mode 100644
index 000000000..cafe149a9
--- /dev/null
+++ b/packages/ui/src/components/Form/customField/TypeaheadEditor.test.tsx
@@ -0,0 +1,113 @@
+import { SelectOptionProps } from '@patternfly/react-core';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { TypeaheadEditor } from './TypeaheadEditor';
+
+describe('TypeaheadField', () => {
+  const initialDataFormatOptions: SelectOptionProps[] = [
+    {
+      value: 'asn1',
+      children: 'ASN.1 File',
+      description: 'Encode and decode data structures using Abstract Syntax Notation One (ASN.1).',
+    },
+    {
+      value: 'avro',
+      children: 'Avro',
+      description: 'Serialize and deserialize messages using Apache Avro binary data format.',
+    },
+    {
+      value: 'barcode',
+      children: 'Barcode',
+      description: 'Transform strings to various 1D/2D barcode bitmap formats and back.',
+    },
+    { value: 'base64', children: 'Base64', description: 'Encode and decode data using Base64.' },
+  ];
+
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('should render the component', () => {
+    render(
+      <TypeaheadEditor
+        selectOptions={initialDataFormatOptions}
+        title="Test"
+        selected={undefined}
+        selectedModel={undefined}
+        selectedSchema={undefined}
+        selectionOnChange={mockOnChange}
+      />,
+    );
+    const inputElement = screen.getByRole('combobox');
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  it('should display the options when the input is clicked', async () => {
+    render(
+      <TypeaheadEditor
+        selectOptions={initialDataFormatOptions}
+        title="Test"
+        selected={undefined}
+        selectedModel={undefined}
+        selectedSchema={undefined}
+        selectionOnChange={mockOnChange}
+      />,
+    );
+    const inputElement = screen.getByRole('combobox');
+    await act(async () => {
+      fireEvent.click(inputElement);
+    });
+    const optionElements = screen.getAllByRole('option');
+    expect(optionElements).toHaveLength(4);
+  });
+
+  it('should select an option when clicked', async () => {
+    render(
+      <TypeaheadEditor
+        selectOptions={initialDataFormatOptions}
+        title="Test"
+        selected={undefined}
+        selectedModel={undefined}
+        selectedSchema={undefined}
+        selectionOnChange={mockOnChange}
+      />,
+    );
+    const inputElement = screen.getByRole('combobox');
+    await act(async () => {
+      fireEvent.click(inputElement);
+    });
+    const optionElement = screen.getByText('Avro');
+    await act(() => {
+      fireEvent.click(optionElement);
+    });
+    expect(mockOnChange).toHaveBeenCalledWith({ name: 'avro', title: 'Avro' }, {});
+  });
+
+  it('should clear the input value when the clear button is clicked', async () => {
+    const selected = { name: 'avro', title: 'Avro' };
+    const selectedModel = {};
+    const selectedSchema = {};
+    render(
+      <TypeaheadEditor
+        selectOptions={initialDataFormatOptions}
+        title="Test"
+        selected={selected}
+        selectedModel={selectedModel}
+        selectedSchema={selectedSchema}
+        selectionOnChange={mockOnChange}
+      />,
+    );
+    const inputElement = screen.getByRole('combobox');
+    await act(async () => {
+      fireEvent.change(inputElement, { target: { value: 'customValue' } });
+    });
+    const clearButton = screen.getByLabelText('Clear input value');
+    await act(async () => {
+      fireEvent.click(clearButton);
+    });
+    expect(inputElement).toHaveValue('');
+    expect(mockOnChange).toHaveBeenCalledWith(undefined, {});
+  });
+});
diff --git a/packages/ui/src/components/Form/customField/TypeaheadEditor.tsx b/packages/ui/src/components/Form/customField/TypeaheadEditor.tsx
new file mode 100644
index 000000000..6843c74fa
--- /dev/null
+++ b/packages/ui/src/components/Form/customField/TypeaheadEditor.tsx
@@ -0,0 +1,252 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+} from '@patternfly/react-core';
+import { FunctionComponent, Ref, useCallback, useEffect, useRef, useState } from 'react';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { SchemaService } from '../schema.service';
+import { MetadataEditor } from '../../MetadataEditor';
+import { JSONSchema4 } from 'json-schema';
+
+interface TypeaheadEditorProps {
+  selectOptions: SelectOptionProps[];
+  title: string;
+  selected: { name: string; title: string } | undefined;
+  selectedSchema: JSONSchema4 | undefined;
+  selectedModel: Record<string, unknown> | undefined;
+  selectionOnChange: (
+    selectedItem: { name: string; title: string } | undefined,
+    newItemModel: Record<string, unknown>,
+  ) => void;
+}
+
+export const TypeaheadEditor: FunctionComponent<TypeaheadEditorProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>(props.selected?.name || '');
+  const [inputValue, setInputValue] = useState<string>(props.selected?.title || '');
+  const [filterValue, setFilterValue] = useState<string>('');
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(props.selectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItem, setActiveItem] = useState<string | null>(null);
+  const textInputRef = useRef<HTMLInputElement>();
+
+  useEffect(() => {
+    props.selected ? setSelected(props.selected.name) : setSelected('');
+  }, [props.selected]);
+
+  useEffect(() => {
+    let newSelectOptions: SelectOptionProps[] = props.selectOptions;
+
+    // Filter menu items based on the text input value when one exists
+    if (filterValue) {
+      const lowerFilterValue = filterValue.toLowerCase();
+      newSelectOptions = props.selectOptions.filter((menuItem) => {
+        return (
+          String(menuItem.value).toLowerCase().includes(lowerFilterValue) ||
+          String(menuItem.children).toLowerCase().includes(lowerFilterValue) ||
+          String(menuItem.description).toLowerCase().includes(lowerFilterValue)
+        );
+      });
+      // When no options are found after filtering, display 'No results found'
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          { isDisabled: false, children: `No results found for "${filterValue}"`, value: 'no results' },
+        ];
+      }
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
+  }, [filterValue, props.selectOptions, isOpen]);
+
+  const onToggleClick = useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+
+  const onSelect = useCallback(
+    (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+      const option = selectOptions.find((option) => option.children === value);
+      if (option && value !== 'no results') {
+        setInputValue(value as string);
+        setFilterValue('');
+        props.selectionOnChange({ name: option!.value as string, title: option!.children as string }, {});
+        setSelected(option!.children as string);
+      }
+      setIsOpen(false);
+      setFocusedItemIndex(null);
+      setActiveItem(null);
+    },
+    [selectOptions, props.selectionOnChange],
+  );
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+    setFilterValue(value);
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus;
+
+    if (isOpen) {
+      if (key === 'ArrowUp') {
+        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+        if (focusedItemIndex === null || focusedItemIndex === 0) {
+          indexToFocus = selectOptions.length - 1;
+        } else {
+          indexToFocus = focusedItemIndex - 1;
+        }
+      }
+
+      if (key === 'ArrowDown') {
+        // When no index is set or at the last index, focus to the first, otherwise increment focus index
+        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+          indexToFocus = 0;
+        } else {
+          indexToFocus = focusedItemIndex + 1;
+        }
+      }
+
+      setFocusedItemIndex(indexToFocus!);
+      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus!];
+      setActiveItem(`select-typeahead-${focusedItem.value.replace(' ', '-')}`);
+    }
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (isOpen && focusedItem.value !== 'no results') {
+          setInputValue(String(focusedItem.children));
+          setFilterValue('');
+          setSelected(String(focusedItem.children));
+        }
+
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+        setFocusedItemIndex(null);
+        setActiveItem(null);
+        break;
+      case 'Tab':
+      case 'Escape':
+        setIsOpen(false);
+        setActiveItem(null);
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Typeahead menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          data-testid="typeahead-select-input"
+          value={inputValue}
+          onClick={onToggleClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder={SchemaService.DROPDOWN_PLACEHOLDER}
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button
+              data-testid="clear-input-value"
+              variant="plain"
+              onClick={() => {
+                setSelected('');
+                setInputValue('');
+                setFilterValue('');
+                props.selectionOnChange(undefined, {});
+                textInputRef?.current?.focus();
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    props.selectOptions && (
+      <>
+        <Select
+          id="typeahead-select"
+          isOpen={isOpen}
+          selected={selected}
+          onSelect={onSelect}
+          onOpenChange={() => {
+            setIsOpen(false);
+          }}
+          toggle={toggle}
+        >
+          <SelectList id="select-typeahead-listbox">
+            {selectOptions.map((option, index) => (
+              <SelectOption
+                key={option.value as string}
+                description={option.description}
+                isFocused={focusedItemIndex === index}
+                className={option.className}
+                data-testid={`${props.title}-dropdownitem-${option.value}`}
+                onClick={() => setSelected(option.children as string)}
+                id={`select-typeahead-${option.value.replace(' ', '-')}`}
+                {...option}
+                value={option.children}
+              />
+            ))}
+          </SelectList>
+        </Select>
+        {props.selected && (
+          <MetadataEditor
+            key={props.selected!.name}
+            data-testid={`${props.title}-editor`}
+            name={`${props.title}`}
+            schema={props.selectedSchema}
+            metadata={props.selectedModel}
+            onChangeModel={(model) =>
+              props.selectionOnChange({ name: props.selected!.name, title: props.selected!.title }, model)
+            }
+          />
+        )}
+      </>
+    )
+  );
+};
diff --git a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx
index ae5f66fa3..5a94118d8 100644
--- a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx
+++ b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx
@@ -1,28 +1,17 @@
 import {
-  Button,
   Card,
   CardBody,
   CardExpandableContent,
   CardHeader,
   CardTitle,
-  MenuToggle,
-  MenuToggleElement,
-  Select,
-  SelectList,
-  SelectOption,
   SelectOptionProps,
-  TextInputGroup,
-  TextInputGroupMain,
-  TextInputGroupUtilities,
 } from '@patternfly/react-core';
-import { FunctionComponent, Ref, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { FunctionComponent, useCallback, useContext, useMemo, useState } from 'react';
 import { EntitiesContext } from '../../../providers';
-import { MetadataEditor } from '../../MetadataEditor';
 import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
-import { SchemaService } from '../schema.service';
 import './DataFormatEditor.scss';
 import { DataFormatService } from './dataformat.service';
-import { TimesIcon } from '@patternfly/react-icons';
+import { TypeaheadEditor } from '../customField/TypeaheadEditor';
 
 interface DataFormatEditorProps {
   selectedNode: CanvasNode;
@@ -30,26 +19,11 @@ interface DataFormatEditorProps {
 
 export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props) => {
   const entitiesContext = useContext(EntitiesContext);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(true);
-
   const dataFormatCatalogMap = useMemo(() => {
     return DataFormatService.getDataFormatMap();
   }, []);
 
-  const visualComponentSchema = props.selectedNode.data?.vizNode?.getComponentSchema();
-  if (visualComponentSchema) {
-    if (!visualComponentSchema.definition) {
-      visualComponentSchema.definition = {};
-    }
-  }
-  const { dataFormat, model: dataFormatModel } = DataFormatService.parseDataFormatModel(
-    dataFormatCatalogMap,
-    visualComponentSchema?.definition,
-  );
-  const [selected, setSelected] = useState<string>(dataFormat?.model.name || '');
-  const [inputValue, setInputValue] = useState<string>(dataFormat?.model.title || '');
-  const initialDataFormatOptions = useMemo(() => {
+  const initialDataFormatOptions: SelectOptionProps[] = useMemo(() => {
     return Object.values(dataFormatCatalogMap).map((option) => {
       return {
         value: option.model.name,
@@ -58,235 +32,69 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
       };
     });
   }, [dataFormatCatalogMap]);
-  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialDataFormatOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
-  const [activeItem, setActiveItem] = useState<string | null>(null);
-  const [filterValue, setFilterValue] = useState<string>('');
-  const textInputRef = useRef<HTMLInputElement>();
 
-  useEffect(() => {
-    dataFormat ? setSelected(dataFormat.model.name) : setSelected('');
-  }, [dataFormat]);
-
-  useEffect(() => {
-    let newSelectOptions: SelectOptionProps[] = initialDataFormatOptions;
-
-    // Filter menu items based on the text input value when one exists
-    if (filterValue) {
-      const lowerFilterValue = filterValue.toLowerCase();
-      newSelectOptions = initialDataFormatOptions.filter((menuItem) => {
-        return (
-          String(menuItem.value).toLowerCase().includes(lowerFilterValue) ||
-          String(menuItem.children).toLowerCase().includes(lowerFilterValue) ||
-          String(menuItem.description).toLowerCase().includes(lowerFilterValue)
-        );
-      });
-      // When no options are found after filtering, display 'No results found'
-      if (!newSelectOptions.length) {
-        newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${filterValue}"`, value: 'no results' },
-        ];
-      }
-      // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        setIsOpen(true);
-      }
+  const visualComponentSchema = props.selectedNode.data?.vizNode?.getComponentSchema();
+  if (visualComponentSchema) {
+    if (!visualComponentSchema.definition) {
+      visualComponentSchema.definition = {};
     }
+  }
 
-    setSelectOptions(newSelectOptions);
-    setActiveItem(null);
-    setFocusedItemIndex(null);
-  }, [filterValue, initialDataFormatOptions, isOpen]);
+  const { dataFormat, model: dataFormatModel } = DataFormatService.parseDataFormatModel(
+    dataFormatCatalogMap,
+    visualComponentSchema?.definition,
+  );
+  const dataFormatOption = dataFormat && {
+    name: dataFormat!.model.name,
+    title: dataFormat!.model.title,
+  };
+  const [selectedDataFormatOption, setSelectedDataFormatOption] = useState<{ name: string; title: string } | undefined>(
+    dataFormatOption,
+  );
 
   const dataFormatSchema = useMemo(() => {
     return DataFormatService.getDataFormatSchema(dataFormat);
   }, [dataFormat]);
 
-  const onToggleClick = useCallback(() => {
-    setIsOpen(!isOpen);
-  }, [isOpen]);
-
   const handleOnChange = useCallback(
-    (selectedDataFormat: string, newDataFormatModel: Record<string, unknown>) => {
+    (
+      selectedDataFormatOption: { name: string; title: string } | undefined,
+      newDataFormatModel: Record<string, unknown>,
+    ) => {
+      setSelectedDataFormatOption(selectedDataFormatOption);
       const model = props.selectedNode.data?.vizNode?.getComponentSchema()?.definition;
       if (!model) return;
-      DataFormatService.setDataFormatModel(dataFormatCatalogMap, model, selectedDataFormat, newDataFormatModel);
+      DataFormatService.setDataFormatModel(
+        dataFormatCatalogMap,
+        model,
+        selectedDataFormatOption ? selectedDataFormatOption!.name : '',
+        newDataFormatModel,
+      );
       props.selectedNode.data?.vizNode?.updateModel(model);
       entitiesContext?.updateSourceCodeFromEntities();
     },
     [entitiesContext, dataFormatCatalogMap, props.selectedNode.data?.vizNode],
   );
 
-  const onSelect = useCallback(
-    (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-      const option = selectOptions.find((option) => option.children === value);
-      if (option && value !== 'no results') {
-        setInputValue(value as string);
-        setFilterValue('');
-        handleOnChange(option!.value as string, {});
-        setSelected(option!.children as string);
-      }
-      setIsOpen(false);
-      setFocusedItemIndex(null);
-      setActiveItem(null);
-    },
-    [selectOptions, handleOnChange],
-  );
-
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setInputValue(value);
-    setFilterValue(value);
-  };
-
-  const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus;
-
-    if (isOpen) {
-      if (key === 'ArrowUp') {
-        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-        if (focusedItemIndex === null || focusedItemIndex === 0) {
-          indexToFocus = selectOptions.length - 1;
-        } else {
-          indexToFocus = focusedItemIndex - 1;
-        }
-      }
-
-      if (key === 'ArrowDown') {
-        // When no index is set or at the last index, focus to the first, otherwise increment focus index
-        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
-          indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
-        }
-      }
-
-      setFocusedItemIndex(indexToFocus!);
-      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus!];
-      setActiveItem(`select-typeahead-${focusedItem.value.replace(' ', '-')}`);
-    }
-  };
-
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
-
-    switch (event.key) {
-      // Select the first available option
-      case 'Enter':
-        if (isOpen && focusedItem.value !== 'no results') {
-          setInputValue(String(focusedItem.children));
-          setFilterValue('');
-          setSelected(String(focusedItem.children));
-        }
-
-        setIsOpen((prevIsOpen) => !prevIsOpen);
-        setFocusedItemIndex(null);
-        setActiveItem(null);
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        event.preventDefault();
-        handleMenuArrowKeys(event.key);
-        break;
-    }
-  };
-
-  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
-    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          data-testid="typeahead-select-input"
-          value={inputValue}
-          onClick={onToggleClick}
-          onChange={onTextInputChange}
-          onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
-          autoComplete="off"
-          innerRef={textInputRef}
-          placeholder={SchemaService.DROPDOWN_PLACEHOLDER}
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
-          role="combobox"
-          isExpanded={isOpen}
-          aria-controls="select-typeahead-listbox"
-        />
-
-        <TextInputGroupUtilities>
-          {!!inputValue && (
-            <Button
-              data-testid="clear-input-value"
-              variant="plain"
-              onClick={() => {
-                setSelected('');
-                setInputValue('');
-                setFilterValue('');
-                handleOnChange('', {});
-                textInputRef?.current?.focus();
-              }}
-              aria-label="Clear input value"
-            >
-              <TimesIcon aria-hidden />
-            </Button>
-          )}
-        </TextInputGroupUtilities>
-      </TextInputGroup>
-    </MenuToggle>
-  );
-
   return (
-    dataFormatCatalogMap && (
-      <div className="dataformat-metadata-editor">
-        <Card isCompact={true} isExpanded={isExpanded}>
-          <CardHeader onExpand={() => setIsExpanded(!isExpanded)}>
-            <CardTitle>Data Format</CardTitle>
-          </CardHeader>
-          <CardExpandableContent>
-            <CardBody data-testid={'dataformat-config-card'}>
-              <Select
-                id="typeahead-select"
-                isOpen={isOpen}
-                selected={selected}
-                onSelect={onSelect}
-                onOpenChange={() => {
-                  setIsOpen(false);
-                }}
-                toggle={toggle}
-              >
-                <SelectList id="select-typeahead-listbox">
-                  {selectOptions.map((option, index) => (
-                    <SelectOption
-                      key={option.value as string}
-                      description={option.description}
-                      isFocused={focusedItemIndex === index}
-                      className={option.className}
-                      data-testid={`dataformat-dropdownitem-${option.value}`}
-                      onClick={() => setSelected(option.children as string)}
-                      id={`select-typeahead-${option.value.replace(' ', '-')}`}
-                      {...option}
-                      value={option.children}
-                    />
-                  ))}
-                </SelectList>
-              </Select>
-              {dataFormat && (
-                <MetadataEditor
-                  key={dataFormat.model.name}
-                  data-testid="dataformat-editor"
-                  name="dataformat"
-                  schema={dataFormatSchema}
-                  metadata={dataFormatModel}
-                  onChangeModel={(model) => handleOnChange(dataFormat.model.name, model)}
-                />
-              )}
-            </CardBody>
-          </CardExpandableContent>
-        </Card>
-      </div>
-    )
+    <div className="dataformat-metadata-editor">
+      <Card isCompact={true} isExpanded={true}>
+        <CardHeader>
+          <CardTitle>Data Format</CardTitle>
+        </CardHeader>
+        <CardExpandableContent>
+          <CardBody data-testid={'dataformat-config-card'}>
+            <TypeaheadEditor
+              selectOptions={initialDataFormatOptions}
+              title="dataformat"
+              selected={selectedDataFormatOption}
+              selectedModel={dataFormatModel}
+              selectedSchema={dataFormatSchema}
+              selectionOnChange={handleOnChange}
+            />
+          </CardBody>
+        </CardExpandableContent>
+      </Card>
+    </div>
   );
 };
diff --git a/packages/ui/src/components/Form/dataFormat/dataformat.service.ts b/packages/ui/src/components/Form/dataFormat/dataformat.service.ts
index 41f0b6691..53ac8dfdf 100644
--- a/packages/ui/src/components/Form/dataFormat/dataformat.service.ts
+++ b/packages/ui/src/components/Form/dataFormat/dataformat.service.ts
@@ -68,7 +68,7 @@ export class DataFormatService {
     }
   }
 
-  private static getDefinitionFromModelName(
+  static getDefinitionFromModelName(
     dataFormatCatalogMap: Record<string, ICamelDataformatDefinition>,
     modelName: string,
   ): ICamelDataformatDefinition | undefined {
diff --git a/packages/ui/src/components/Form/expression/ExpressionEditor.scss b/packages/ui/src/components/Form/expression/ExpressionEditor.scss
index d979da493..e4140b972 100644
--- a/packages/ui/src/components/Form/expression/ExpressionEditor.scss
+++ b/packages/ui/src/components/Form/expression/ExpressionEditor.scss
@@ -3,6 +3,6 @@
   overflow-y: auto;
 }
 
-.metadata-editor {
+.pf-v5-c-form {
   margin-top: 24px;
 }
diff --git a/packages/ui/src/components/Form/expression/ExpressionEditor.tsx b/packages/ui/src/components/Form/expression/ExpressionEditor.tsx
index 4d3eb86a6..3cacb06a6 100644
--- a/packages/ui/src/components/Form/expression/ExpressionEditor.tsx
+++ b/packages/ui/src/components/Form/expression/ExpressionEditor.tsx
@@ -1,22 +1,9 @@
-import {
-  Button,
-  MenuToggle,
-  MenuToggleElement,
-  Select,
-  SelectList,
-  SelectOption,
-  SelectOptionProps,
-  TextInputGroup,
-  TextInputGroupMain,
-  TextInputGroupUtilities,
-} from '@patternfly/react-core';
-import { TimesIcon } from '@patternfly/react-icons';
-import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SelectOptionProps } from '@patternfly/react-core';
+import { FunctionComponent, useCallback, useMemo, useState } from 'react';
 import { ICamelLanguageDefinition } from '../../../models';
-import { MetadataEditor } from '../../MetadataEditor';
-import { SchemaService } from '../schema.service';
 import './ExpressionEditor.scss';
 import { ExpressionService } from './expression.service';
+import { TypeaheadEditor } from '../customField/TypeaheadEditor';
 
 interface ExpressionEditorProps {
   language?: ICamelLanguageDefinition;
@@ -41,216 +28,37 @@ export const ExpressionEditor: FunctionComponent<ExpressionEditorProps> = ({
     });
   }, []);
 
-  const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState<string>(language?.model.title || '');
-  const [filterValue, setFilterValue] = useState<string>('');
-  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(languageCatalogMap);
-  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
-  const [activeItem, setActiveItem] = useState<string | null>(null);
-  const textInputRef = useRef<HTMLInputElement>();
-  const [selected, setSelected] = useState<string>(language?.model.title || '');
+  const languageOption = language && {
+    name: language!.model.name,
+    title: language!.model.title,
+  };
+  const [selectedLanguageOption, setSelectedLanguageOption] = useState<{ name: string; title: string } | undefined>(
+    languageOption,
+  );
 
   const languageSchema = useMemo(() => {
     return language && ExpressionService.getLanguageSchema(language);
   }, [language]);
 
-  const onSelect = useCallback(
-    (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-      const model = languageCatalogMap.find((model) => model.children === value);
-      if (model && value !== 'no results') {
-        setInputValue(value as string);
-        setFilterValue('');
-        onChangeExpressionModel(model!.value as string, {});
-        setSelected(model!.children as string);
-      }
-      setIsOpen(false);
-      setFocusedItemIndex(null);
-      setActiveItem(null);
+  const handleOnChange = useCallback(
+    (
+      selectedLanguageOption: { name: string; title: string } | undefined,
+      newlanguageModel: Record<string, unknown>,
+    ) => {
+      setSelectedLanguageOption(selectedLanguageOption);
+      onChangeExpressionModel(selectedLanguageOption ? selectedLanguageOption!.name : '', newlanguageModel);
     },
-    [languageCatalogMap, onChangeExpressionModel],
-  );
-
-  const onToggleClick = useCallback(() => {
-    setIsOpen(!isOpen);
-  }, [isOpen]);
-
-  useEffect(() => {
-    let newSelectOptions: SelectOptionProps[] = languageCatalogMap;
-
-    // Filter menu items based on the text input value when one exists
-    if (filterValue) {
-      const lowerFilterValue = filterValue.toLowerCase();
-      newSelectOptions = languageCatalogMap.filter((menuItem) => {
-        return (
-          String(menuItem.value).toLowerCase().includes(lowerFilterValue) ||
-          String(menuItem.children).toLowerCase().includes(lowerFilterValue) ||
-          String(menuItem.description).toLowerCase().includes(lowerFilterValue)
-        );
-      });
-      // When no options are found after filtering, display 'No results found'
-      if (!newSelectOptions.length) {
-        newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${filterValue}"`, value: 'no results' },
-        ];
-      }
-      // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        setIsOpen(true);
-      }
-    }
-
-    setSelectOptions(newSelectOptions);
-    setActiveItem(null);
-    setFocusedItemIndex(null);
-  }, [filterValue, isOpen, languageCatalogMap]);
-
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setInputValue(value);
-    setFilterValue(value);
-  };
-
-  const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus;
-
-    if (isOpen) {
-      if (key === 'ArrowUp') {
-        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-        if (focusedItemIndex === null || focusedItemIndex === 0) {
-          indexToFocus = selectOptions.length - 1;
-        } else {
-          indexToFocus = focusedItemIndex - 1;
-        }
-      }
-
-      if (key === 'ArrowDown') {
-        // When no index is set or at the last index, focus to the first, otherwise increment focus index
-        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
-          indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
-        }
-      }
-
-      setFocusedItemIndex(indexToFocus!);
-      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus!];
-      setActiveItem(`select-typeahead-${focusedItem.value.replace(' ', '-')}`);
-    }
-  };
-
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
-
-    switch (event.key) {
-      // Select the first available option
-      case 'Enter':
-        if (isOpen && focusedItem.value !== 'no results') {
-          setInputValue(String(focusedItem.children));
-          setFilterValue('');
-          setSelected(String(focusedItem.children));
-        }
-
-        setIsOpen((prevIsOpen) => !prevIsOpen);
-        setFocusedItemIndex(null);
-        setActiveItem(null);
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        event.preventDefault();
-        handleMenuArrowKeys(event.key);
-        break;
-    }
-  };
-
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          data-testid="typeahead-select-input"
-          value={inputValue}
-          onClick={onToggleClick}
-          onChange={onTextInputChange}
-          onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
-          autoComplete="off"
-          innerRef={textInputRef}
-          placeholder={SchemaService.DROPDOWN_PLACEHOLDER}
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
-          role="combobox"
-          isExpanded={isOpen}
-          aria-controls="select-typeahead-listbox"
-        />
-
-        <TextInputGroupUtilities>
-          {!!inputValue && (
-            <Button
-              data-testid="clear-input-value"
-              variant="plain"
-              onClick={() => {
-                setSelected('');
-                setInputValue('');
-                setFilterValue('');
-                onChangeExpressionModel('', {});
-                textInputRef?.current?.focus();
-              }}
-              aria-label="Clear input value"
-            >
-              <TimesIcon aria-hidden />
-            </Button>
-          )}
-        </TextInputGroupUtilities>
-      </TextInputGroup>
-    </MenuToggle>
+    [languageCatalogMap],
   );
 
   return (
-    languageCatalogMap && (
-      <>
-        <Select
-          id="typeahead-select"
-          isOpen={isOpen}
-          selected={selected}
-          onSelect={onSelect}
-          onOpenChange={() => {
-            setIsOpen(false);
-          }}
-          toggle={toggle}
-        >
-          <SelectList id="select-typeahead-listbox">
-            {selectOptions.map((option, index) => (
-              <SelectOption
-                key={option.value as string}
-                description={option.description}
-                isFocused={focusedItemIndex === index}
-                className={option.className}
-                data-testid={`expression-dropdownitem-${option.value}`}
-                onClick={() => setSelected(option.children as string)}
-                id={`select-typeahead-${option.value.replace(' ', '-')}`}
-                {...option}
-                value={option.children}
-              />
-            ))}
-          </SelectList>
-        </Select>
-        {language && (
-          <div className="metadata-editor">
-            <MetadataEditor
-              key={language.model.name}
-              data-testid="expression-editor"
-              name="expression"
-              schema={languageSchema}
-              metadata={expressionModel}
-              onChangeModel={(model) => onChangeExpressionModel(language.model.name, model)}
-            />
-          </div>
-        )}
-      </>
-    )
+    <TypeaheadEditor
+      selectOptions={languageCatalogMap}
+      title="expression"
+      selected={selectedLanguageOption}
+      selectedModel={expressionModel}
+      selectedSchema={languageSchema}
+      selectionOnChange={handleOnChange}
+    />
   );
 };
diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.scss b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.scss
index e1115b4ba..c3f1518d6 100644
--- a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.scss
+++ b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.scss
@@ -1,3 +1,9 @@
-.load-balancer-editor {
-  margin-top: 24px;
+.loadbalancer-metadata-editor {
+  .pf-v5-c-card {
+    margin-bottom: 24px;
+  }
+
+  .pf-v5-c-form {
+    margin-top: 24px;
+  }
 }
diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx
index 35c074270..3232f14c7 100644
--- a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx
+++ b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx
@@ -1,54 +1,30 @@
 import {
-  Button,
   Card,
   CardBody,
   CardExpandableContent,
   CardHeader,
   CardTitle,
-  MenuToggle,
-  MenuToggleElement,
-  Select,
-  SelectList,
-  SelectOption,
   SelectOptionProps,
-  TextInputGroup,
-  TextInputGroupMain,
-  TextInputGroupUtilities,
 } from '@patternfly/react-core';
-import { FunctionComponent, Ref, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { FunctionComponent, useCallback, useContext, useMemo, useState } from 'react';
 import { EntitiesContext } from '../../../providers';
-import { MetadataEditor } from '../../MetadataEditor';
 import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { LoadBalancerService } from './loadbalancer.service';
-import { SchemaService } from '../schema.service';
 import './LoadBalancerEditor.scss';
-import { TimesIcon } from '@patternfly/react-icons';
+import { TypeaheadEditor } from '../customField/TypeaheadEditor';
+
 interface LoadBalancerEditorProps {
   selectedNode: CanvasNode;
 }
 
 export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (props) => {
   const entitiesContext = useContext(EntitiesContext);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(true);
 
   const loadBalancerCatalogMap = useMemo(() => {
     return LoadBalancerService.getLoadBalancerMap();
   }, []);
 
-  const visualComponentSchema = props.selectedNode.data?.vizNode?.getComponentSchema();
-  if (visualComponentSchema) {
-    if (!visualComponentSchema.definition) {
-      visualComponentSchema.definition = {};
-    }
-  }
-  const { loadBalancer, model: loadBalancerModel } = LoadBalancerService.parseLoadBalancerModel(
-    loadBalancerCatalogMap,
-    visualComponentSchema?.definition,
-  );
-  const [selected, setSelected] = useState<string>(loadBalancer?.model.name || '');
-  const [inputValue, setInputValue] = useState<string>(loadBalancer?.model.title || '');
-  const initialLoadBalancerOptions = useMemo(() => {
+  const initialLoadBalancerOptions: SelectOptionProps[] = useMemo(() => {
     return Object.values(loadBalancerCatalogMap).map((option) => {
       return {
         value: option.model.name,
@@ -57,62 +33,41 @@ export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (p
       };
     });
   }, [loadBalancerCatalogMap]);
-  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialLoadBalancerOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
-  const [activeItem, setActiveItem] = useState<string | null>(null);
-  const [filterValue, setFilterValue] = useState<string>('');
-  const textInputRef = useRef<HTMLInputElement>();
 
-  useEffect(() => {
-    loadBalancer ? setSelected(loadBalancer.model.name) : setSelected('');
-  }, [loadBalancer]);
-
-  useEffect(() => {
-    let newSelectOptions: SelectOptionProps[] = initialLoadBalancerOptions;
-
-    // Filter menu items based on the text input value when one exists
-    if (filterValue) {
-      const lowerFilterValue = filterValue.toLowerCase();
-      newSelectOptions = initialLoadBalancerOptions.filter((menuItem) => {
-        return (
-          String(menuItem.value).toLowerCase().includes(lowerFilterValue) ||
-          String(menuItem.children).toLowerCase().includes(lowerFilterValue) ||
-          String(menuItem.description).toLowerCase().includes(lowerFilterValue)
-        );
-      });
-      // When no options are found after filtering, display 'No results found'
-      if (!newSelectOptions.length) {
-        newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${filterValue}"`, value: 'no results' },
-        ];
-      }
-      // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        setIsOpen(true);
-      }
+  const visualComponentSchema = props.selectedNode.data?.vizNode?.getComponentSchema();
+  if (visualComponentSchema) {
+    if (!visualComponentSchema.definition) {
+      visualComponentSchema.definition = {};
     }
-
-    setSelectOptions(newSelectOptions);
-    setActiveItem(null);
-    setFocusedItemIndex(null);
-  }, [filterValue, initialLoadBalancerOptions, isOpen]);
+  }
+  const { loadBalancer, model: loadBalancerModel } = LoadBalancerService.parseLoadBalancerModel(
+    loadBalancerCatalogMap,
+    visualComponentSchema?.definition,
+  );
+  const loadBalancerOption = loadBalancer && {
+    name: loadBalancer!.model.name,
+    title: loadBalancer!.model.title,
+  };
+  const [selectedLoadBalancerOption, setSelectedLoadBalancerOption] = useState<
+    { name: string; title: string } | undefined
+  >(loadBalancerOption);
 
   const loadBalancerSchema = useMemo(() => {
     return LoadBalancerService.getLoadBalancerSchema(loadBalancer);
   }, [loadBalancer]);
 
-  const onToggleClick = useCallback(() => {
-    setIsOpen(!isOpen);
-  }, [isOpen]);
-
   const handleOnChange = useCallback(
-    (selectedLoadBalancer: string, newLoadBalancerModel: Record<string, unknown>) => {
+    (
+      selectedLoadBalancerOption: { name: string; title: string } | undefined,
+      newLoadBalancerModel: Record<string, unknown>,
+    ) => {
+      setSelectedLoadBalancerOption(selectedLoadBalancerOption);
       const model = props.selectedNode.data?.vizNode?.getComponentSchema()?.definition;
       if (!model) return;
       LoadBalancerService.setLoadBalancerModel(
         loadBalancerCatalogMap,
         model,
-        selectedLoadBalancer,
+        selectedLoadBalancerOption ? selectedLoadBalancerOption!.name : '',
         newLoadBalancerModel,
       );
       props.selectedNode.data?.vizNode?.updateModel(model);
@@ -121,176 +76,25 @@ export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (p
     [entitiesContext, loadBalancerCatalogMap, props.selectedNode.data?.vizNode],
   );
 
-  const onSelect = useCallback(
-    (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-      const option = selectOptions.find((option) => option.children === value);
-      if (option && value !== 'no results') {
-        setInputValue(value as string);
-        setFilterValue('');
-        handleOnChange(option!.value as string, {});
-        setSelected(option!.children as string);
-      }
-      setIsOpen(false);
-      setFocusedItemIndex(null);
-      setActiveItem(null);
-    },
-    [handleOnChange, selectOptions],
-  );
-
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setInputValue(value);
-    setFilterValue(value);
-  };
-
-  const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus;
-
-    if (isOpen) {
-      if (key === 'ArrowUp') {
-        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-        if (focusedItemIndex === null || focusedItemIndex === 0) {
-          indexToFocus = selectOptions.length - 1;
-        } else {
-          indexToFocus = focusedItemIndex - 1;
-        }
-      }
-
-      if (key === 'ArrowDown') {
-        // When no index is set or at the last index, focus to the first, otherwise increment focus index
-        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
-          indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
-        }
-      }
-
-      setFocusedItemIndex(indexToFocus!);
-      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus!];
-      setActiveItem(`select-typeahead-${focusedItem.value.replace(' ', '-')}`);
-    }
-  };
-
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
-
-    switch (event.key) {
-      // Select the first available option
-      case 'Enter':
-        if (isOpen && focusedItem.value !== 'no results') {
-          setInputValue(String(focusedItem.children));
-          setFilterValue('');
-          setSelected(String(focusedItem.children));
-        }
-
-        setIsOpen((prevIsOpen) => !prevIsOpen);
-        setFocusedItemIndex(null);
-        setActiveItem(null);
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        event.preventDefault();
-        handleMenuArrowKeys(event.key);
-        break;
-    }
-  };
-
-  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
-    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          data-testid="typeahead-select-input"
-          value={inputValue}
-          onClick={onToggleClick}
-          onChange={onTextInputChange}
-          onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
-          autoComplete="off"
-          innerRef={textInputRef}
-          placeholder={SchemaService.DROPDOWN_PLACEHOLDER}
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
-          role="combobox"
-          isExpanded={isOpen}
-          aria-controls="select-typeahead-listbox"
-        />
-
-        <TextInputGroupUtilities>
-          {!!inputValue && (
-            <Button
-              data-testid="clear-input-value"
-              variant="plain"
-              onClick={() => {
-                setSelected('');
-                setInputValue('');
-                setFilterValue('');
-                handleOnChange('', {});
-                textInputRef?.current?.focus();
-              }}
-              aria-label="Clear input value"
-            >
-              <TimesIcon aria-hidden />
-            </Button>
-          )}
-        </TextInputGroupUtilities>
-      </TextInputGroup>
-    </MenuToggle>
-  );
-
   return (
-    loadBalancerCatalogMap && (
-      <Card isCompact={true} isExpanded={isExpanded}>
-        <CardHeader onExpand={() => setIsExpanded(!isExpanded)}>
+    <div className="loadbalancer-metadata-editor">
+      <Card isCompact={true} isExpanded={true}>
+        <CardHeader>
           <CardTitle>Load Balancer</CardTitle>
         </CardHeader>
         <CardExpandableContent>
           <CardBody data-testid={'loadbalancer-config-card'}>
-            <Select
-              id="typeahead-select"
-              isOpen={isOpen}
-              selected={selected}
-              onSelect={onSelect}
-              onOpenChange={() => {
-                setIsOpen(false);
-              }}
-              toggle={toggle}
-            >
-              <SelectList id="select-typeahead-listbox">
-                {selectOptions.map((option, index) => (
-                  <SelectOption
-                    key={option.value as string}
-                    description={option.description}
-                    isFocused={focusedItemIndex === index}
-                    className={option.className}
-                    data-testid={`loadbalancer-dropdownitem-${option.value}`}
-                    onClick={() => setSelected(option.children as string)}
-                    id={`select-typeahead-${option.value.replace(' ', '-')}`}
-                    {...option}
-                    value={option.children}
-                  />
-                ))}
-              </SelectList>
-            </Select>
-            {loadBalancer && (
-              <div className="load-balancer-editor">
-                <MetadataEditor
-                  key={loadBalancer.model.name}
-                  data-testid="loadbalancer-editor"
-                  name="loadbalancer"
-                  schema={loadBalancerSchema}
-                  metadata={loadBalancerModel}
-                  onChangeModel={(model) => handleOnChange(loadBalancer.model.name, model)}
-                />
-              </div>
-            )}
+            <TypeaheadEditor
+              selectOptions={initialLoadBalancerOptions}
+              title="loadbalancer"
+              selected={selectedLoadBalancerOption}
+              selectedModel={loadBalancerModel}
+              selectedSchema={loadBalancerSchema}
+              selectionOnChange={handleOnChange}
+            />
           </CardBody>
         </CardExpandableContent>
       </Card>
-    )
+    </div>
   );
 };
diff --git a/packages/ui/src/components/Form/loadBalancer/loadbalancer.service.ts b/packages/ui/src/components/Form/loadBalancer/loadbalancer.service.ts
index 1855ca20c..56a6017a5 100644
--- a/packages/ui/src/components/Form/loadBalancer/loadbalancer.service.ts
+++ b/packages/ui/src/components/Form/loadBalancer/loadbalancer.service.ts
@@ -68,7 +68,7 @@ export class LoadBalancerService {
     }
   }
 
-  private static getDefinitionFromModelName(
+  static getDefinitionFromModelName(
     loadBalancerCatalogMap: Record<string, ICamelLoadBalancerDefinition>,
     modelName: string,
   ): ICamelLoadBalancerDefinition | undefined {