diff --git a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/ForemanForm.js b/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/ForemanForm.js
index 17c16ac1db..f5a793bd0c 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/ForemanForm.js
+++ b/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/ForemanForm.js
@@ -14,6 +14,7 @@ const ForemanForm = ({
   validationSchema,
   enableReinitialize,
   onCancel,
+  isPF5,
 }) => (
   <Formik
     onSubmit={onSubmit}
@@ -38,6 +39,9 @@ const ForemanForm = ({
               : __('Warning! ')
           }
           submitting={formProps.isSubmitting}
+          className={
+            isPF5 ? 'pf-v5-c-form pf-m-horizontal' : 'form-horizontal well'
+          }
         >
           {cloneChildren(children, { formProps, disabled })}
         </Form>
@@ -63,11 +67,13 @@ ForemanForm.propTypes = {
   validationSchema: PropTypes.object,
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   enableReinitialize: PropTypes.bool,
+  isPF5: PropTypes.bool,
 };
 
 ForemanForm.defaultProps = {
   validationSchema: undefined,
   enableReinitialize: false,
+  isPF5: false,
 };
 
 export default ForemanForm;
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/ForemanForm.test.js.snap b/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/ForemanForm.test.js.snap
index 8cdefd7ac4..6e22874135 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/ForemanForm.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/ForemanForm.test.js.snap
@@ -31,6 +31,7 @@ exports[`ForemanForm render foreman form with fields 1`] = `
       "surname": "Lindbergh",
     }
   }
+  isPF5={false}
   onCancel={[Function]}
   onSubmit={[Function]}
   validationSchema={
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/FormField.fixtures.js b/webpack/assets/javascripts/react_app/components/common/forms/FormField.fixtures.js
index 4e94162850..66ccdd5c6c 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/FormField.fixtures.js
+++ b/webpack/assets/javascripts/react_app/components/common/forms/FormField.fixtures.js
@@ -46,6 +46,7 @@ export const formAutocompleteDataProps = {
   searchQuery: '',
   name: 'Filter[search]',
   id: 'form-search',
+
 };
 
 export const counterProps = {
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/FormField.js b/webpack/assets/javascripts/react_app/components/common/forms/FormField.js
index a82b368c14..c77c7f3e2d 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/FormField.js
+++ b/webpack/assets/javascripts/react_app/components/common/forms/FormField.js
@@ -8,11 +8,53 @@ import {
   HelpBlock,
   FieldLevelHelp,
 } from 'patternfly-react';
-import { Icon } from '@patternfly/react-core';
+import {
+  FormGroup as PF5FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Icon,
+} from '@patternfly/react-core';
+
+import LabelIcon from 'foremanReact/components/common/LabelIcon';
 import { WarningTriangleIcon, ErrorCircleOIcon } from '@patternfly/react-icons';
 import InputFactory from './InputFactory';
 import { noop } from '../../../common/helpers';
 
+const InlineMessagePF5 = ({ error, warning, helpInline }) => {
+  if (!error && !warning && !helpInline) {
+    return null;
+  }
+  const validationState = Object.entries({ error, warning }).find(
+    ([_, v]) => v
+  )?.[0];
+  const icon = () =>
+    ({
+      error: { icon: <ErrorCircleOIcon /> },
+      warning: { icon: <WarningTriangleIcon /> },
+    }[validationState]);
+
+  return (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem variant={validationState || 'default'} {...icon()}>
+          {error || warning || helpInline}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  );
+};
+InlineMessagePF5.propTypes = {
+  error: PropTypes.string,
+  warning: PropTypes.string,
+  helpInline: PropTypes.string,
+};
+InlineMessagePF5.defaultProps = {
+  error: null,
+  warning: null,
+  helpInline: null,
+};
+
 const InlineMessage = ({ error, warning, helpInline }) => {
   if (!error && !warning && !helpInline) {
     return null;
@@ -66,6 +108,7 @@ const FormField = ({
   onChange,
   children,
   inputProps,
+  isPF5,
   ...otherProps
 }) => {
   const [innerError, setError] = useState(error);
@@ -88,6 +131,28 @@ const FormField = ({
   if (innerWarning) validationState = 'warning';
   if (innerError) validationState = 'error';
 
+  if (isPF5) {
+    return (
+      <PF5FormGroup
+        role="group"
+        fieldId={id}
+        label={label}
+        labelIcon={
+          typeof labelHelp === 'string' ? <LabelIcon text={labelHelp} /> : null
+        }
+        isRequired={required}
+        isStack
+        disabled={disabled}
+      >
+        {children}
+        <InlineMessagePF5
+          error={innerError}
+          warning={innerWarning}
+          helpInline={helpInline}
+        />
+      </PF5FormGroup>
+    );
+  }
   return (
     <FormGroup
       controlId={id}
@@ -117,6 +182,16 @@ const FormField = ({
   );
 };
 
+PF5FormGroup.propTypes = {
+  fieldId: PropTypes.string,
+  label: PropTypes.string,
+  labelIcon: PropTypes.element,
+  isRequired: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  validationState: PropTypes.oneOf([null, 'error', 'warning', 'success']),
+  isStack: PropTypes.bool,
+};
+
 FormField.propTypes = {
   type: PropTypes.string,
   id: PropTypes.string,
@@ -130,7 +205,7 @@ FormField.propTypes = {
   ]),
   className: PropTypes.string,
   label: PropTypes.string,
-  labelHelp: PropTypes.string,
+  labelHelp: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.string,
@@ -140,6 +215,7 @@ FormField.propTypes = {
   onChange: PropTypes.func,
   children: PropTypes.element,
   inputProps: PropTypes.object,
+  isPF5: PropTypes.bool,
 };
 
 FormField.defaultProps = {
@@ -159,6 +235,7 @@ FormField.defaultProps = {
   onChange: noop,
   children: null,
   inputProps: null,
+  isPF5: false,
 };
 
 export default FormField;
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/InputFactory.js b/webpack/assets/javascripts/react_app/components/common/forms/InputFactory.js
index adc97cde44..065d8b66e7 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/InputFactory.js
+++ b/webpack/assets/javascripts/react_app/components/common/forms/InputFactory.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormControl } from 'patternfly-react';
+//
 
 import { noop } from '../../../common/helpers';
 import SearchBar from '../../SearchBar';
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/TypeAheadSelect.js b/webpack/assets/javascripts/react_app/components/common/forms/TypeAheadSelect.js
new file mode 100644
index 0000000000..aa1b0b2aca
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/forms/TypeAheadSelect.js
@@ -0,0 +1,277 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+const TypeAheadSelect = ({
+  placeholder,
+  options,
+  onChange,
+  selectedItem = [],
+}) => {
+  const initState = (selectedItem || [{ value: '', label: '' }])[0];
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState(initState.value);
+  const [inputText, setInputText] = React.useState(initState.label);
+  const [filterValue, setFilterValue] = React.useState('');
+  const [selectOptions, setSelectOptions] = React.useState(options);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState(null);
+  const [activeItemId, setActiveItemId] = React.useState(null);
+  const textInputRef = React.useRef();
+  const NO_RESULTS = 'no results';
+
+  React.useEffect(() => {
+    let newSelectOptions = options;
+    if (filterValue) {
+      newSelectOptions = options.filter(menuItem =>
+        String(menuItem.value)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase())
+      );
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          {
+            isAriaDisabled: true,
+            children: `No results found for "${filterValue}"`,
+            value: NO_RESULTS,
+          },
+        ];
+      }
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+    setSelectOptions(newSelectOptions);
+  }, [filterValue, isOpen, options]);
+
+  const createItemId = value =>
+    `select-typeahead-${String(value || '').replace(' ', '-')}`;
+  const setActiveAndFocusedItem = itemIndex => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value));
+  };
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+  };
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!inputText) {
+      closeMenu();
+    }
+  };
+  const selectOption = (value, content) => {
+    // console.log('selected', content);
+    setInputText(String(content));
+    setFilterValue('');
+    setSelected(String(value));
+    onChange([{ value }]);
+    closeMenu();
+  };
+  const onSelect = (_event, value) => {
+    if (value && value !== NO_RESULTS) {
+      const optionText = selectOptions.find(option => option.value === value);
+      selectOption(value, optionText?.label || optionText?.children);
+    }
+  };
+  const onTextInputChange = (_event, value) => {
+    setInputText(value);
+    setFilterValue(value);
+    resetActiveAndFocusedItem();
+    if (value !== selected) {
+      setSelected('');
+    }
+  };
+  const handleMenuArrowKeys = key => {
+    let indexToFocus = 0;
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    if (selectOptions.every(option => option.isDisabled)) {
+      return;
+    }
+    if (key === 'ArrowUp') {
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = selectOptions.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
+          indexToFocus = selectOptions.length - 1;
+        }
+      }
+    }
+    if (key === 'ArrowDown') {
+      if (
+        focusedItemIndex === null ||
+        focusedItemIndex === selectOptions.length - 1
+      ) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
+          indexToFocus = 0;
+        }
+      }
+    }
+    setActiveAndFocusedItem(indexToFocus);
+  };
+  const onInputKeyDown = event => {
+    const focusedItem =
+      focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
+    switch (event.key) {
+      case 'Enter':
+        if (
+          isOpen &&
+          focusedItem &&
+          focusedItem.value !== NO_RESULTS &&
+          !focusedItem.isAriaDisabled
+        ) {
+          selectOption(focusedItem.value, focusedItem.children);
+        }
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+      default:
+        break;
+    }
+  };
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+    // eslint-disable-next-line no-unused-expressions
+    textInputRef?.current?.focus();
+  };
+  const onClearButtonClick = () => {
+    setSelected('');
+    setInputText('');
+    setFilterValue('');
+    resetActiveAndFocusedItem();
+    // eslint-disable-next-line no-unused-expressions
+    textInputRef?.current?.focus();
+  };
+  const toggle = toggleRef => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Typeahead menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputText}
+          onClick={onInputClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder={placeholder}
+          {...(activeItemId && {
+            'aria-activedescendant': activeItemId,
+          })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
+        />
+
+        <TextInputGroupUtilities
+          {...(!inputText
+            ? {
+                style: {
+                  display: 'none',
+                },
+              }
+            : {})}
+        >
+          <Button
+            ouiaId="clear-typeahead-button"
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+          >
+            <TimesIcon aria-hidden />
+          </Button>
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+  return (
+    <Select
+      ouiaId="typeahead-select"
+      id="typeahead-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={openState => {
+        !openState && closeMenu();
+      }}
+      toggle={toggle}
+      shouldFocusFirstItemOnOpen={false}
+    >
+      <SelectList id="select-typeahead-listbox">
+        {selectOptions.map((option, index) => (
+          <SelectOption
+            key={option.value || option.children}
+            isFocused={focusedItemIndex === index}
+            className={option.className}
+            id={createItemId(option.value)}
+            {...option}
+            ref={null}
+          >
+            {option.label || option.children}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+};
+
+TypeAheadSelect.propTypes = {
+  placeholder: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+      label: PropTypes.string.isRequired,
+      className: PropTypes.string,
+    })
+  ).isRequired,
+  onChange: PropTypes.func.isRequired,
+  selectedItem: PropTypes.array,
+};
+
+TypeAheadSelect.defaultProps = {
+  placeholder: '',
+  selectedItem: [],
+};
+
+export default TypeAheadSelect;
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/FormField.test.js b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/FormField.test.js
index 15dcbe4d79..06bbb77a5b 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/FormField.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/FormField.test.js
@@ -1,4 +1,7 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { screen, fireEvent, render, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
 import {
   dateTimeWithErrorProps,
   textFieldWithHelpProps,
@@ -18,6 +21,38 @@ const fixtures = {
 
 describe('FormField', () => {
   describe('rendering', () => {
-    testComponentSnapshotsWithFixtures(FormField, fixtures);
-  });
-});
+    it('renders text input', () => {
+      const { container } = render(<FormField {...fixtures['renders text input']} />);
+      expect(container.querySelector('input[type="text"]')).toBeInTheDocument();
+    });
+
+    it('renders Date input', () => {
+      const { container } = render(<FormField {...fixtures['renders Date input']} />);
+      expect(container.querySelector('input[aria-label="date-time-picker-input"]')).toBeInTheDocument();
+    });
+
+    it('renders Time input', () => {
+      const { container } = render(<FormField {...fixtures['renders Time input']} />);
+      expect(container.querySelector('input[aria-label="date-time-picker-input"]')).toBeInTheDocument();
+    })
+
+    it('renders DateTime input', () => {
+      const { container } = render(<FormField {...fixtures['renders DateTime input']} />);
+      expect(container.querySelector('input[aria-label="date-picker-input"]')).toBeInTheDocument();
+    })
+
+    it('renders text complex options and help', () => {
+      const { container } = render(<FormField {...fixtures['renders text complex options and help']} />);
+      expect(container.querySelector('input[name="group[textfield]"]')).toBeInTheDocument();
+    })
+
+    it('renders DateTime complex options and error', () => {
+      render(<FormField {...fixtures['renders DateTime complex options and error']} />);
+      expect(screen.getByLabelText('DateTime with error')).toBeInTheDocument();
+    })
+
+    xit('renders AutoComplete', () => { // skipping since already updated in another test
+      render(<FormField {...fixtures['renders AutoComplete']} />);
+    })
+  })
+})
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/__snapshots__/FormField.test.js.snap b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/__snapshots__/FormField.test.js.snap
index 401c18901c..475c6f9a6a 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/__snapshots__/FormField.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/__snapshots__/FormField.test.js.snap
@@ -45,234 +45,3 @@ exports[`FormField rendering renders AutoComplete 1`] = `
   />
 </FormGroup>
 `;
-
-exports[`FormField rendering renders Date input 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      name="a"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="date"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders DateTime complex options and error 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId="date-time"
-  disabled={false}
-  validationState="error"
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  >
-    DateTime with error
-  </ControlLabel>
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      name="group[datetime]"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="dateTime"
-      value={1991-01-01T01:12:01.000Z}
-    />
-  </Col>
-  <InlineMessage
-    error="can not be in the past"
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders DateTime input 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      name="a"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="dateTime"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders Time input 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      name="a"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="time"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders text complex options and help 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId="text-field"
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  >
-    textField
-    <FieldLevelHelp
-      buttonClass="field-help"
-      content={
-        <React.Fragment>
-          This is more helpful text
-        </React.Fragment>
-      }
-      placement="right"
-      rootClose={true}
-    />
-  </ControlLabel>
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      name="group[textfield]"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="text"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders text input 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      name="a"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="text"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;