diff --git a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx
new file mode 100644
index 0000000000..26a6dac3f2
--- /dev/null
+++ b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Tooltip } from '@patternfly/react-core';
+import { CheckboxField } from '@components/FormField';
+import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
+import styled from 'styled-components';
+
+const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
+ margin-left: 10px;
+`;
+
+const FieldHeader = styled.div`
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: var(--pf-c-form__label--PaddingBottom);
+
+ label {
+ --pf-c-form__label--PaddingBottom: 0px;
+ }
+`;
+
+const StyledCheckboxField = styled(CheckboxField)`
+ --pf-c-check__label--FontSize: var(--pf-c-form__label--FontSize);
+`;
+
+function FieldWithPrompt({
+ children,
+ fieldId,
+ i18n,
+ isRequired,
+ label,
+ promptId,
+ promptName,
+ promptValidate,
+ tooltip,
+ tooltipMaxWidth,
+}) {
+ return (
+
+
+
+
+ {tooltip && (
+
+
+
+ )}
+
+
+
+ {children}
+
+ );
+}
+
+FieldWithPrompt.propTypes = {
+ fieldId: PropTypes.string.isRequired,
+ isRequired: PropTypes.bool,
+ label: PropTypes.string.isRequired,
+ promptId: PropTypes.string.isRequired,
+ promptValidate: PropTypes.func,
+ tooltip: PropTypes.node,
+ tooltipMaxWidth: PropTypes.string,
+};
+
+FieldWithPrompt.defaultProps = {
+ isRequired: false,
+ promptValidate: () => {},
+ tooltip: null,
+ tooltipMaxWidth: '',
+};
+
+export default withI18n()(FieldWithPrompt);
diff --git a/awx/ui_next/src/components/FieldWithPrompt/index.js b/awx/ui_next/src/components/FieldWithPrompt/index.js
new file mode 100644
index 0000000000..77c1d5bda6
--- /dev/null
+++ b/awx/ui_next/src/components/FieldWithPrompt/index.js
@@ -0,0 +1 @@
+export { default } from './FieldWithPrompt';
diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index 326ae5f389..5f48522dfb 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@@ -21,6 +21,7 @@ import FormField, {
FieldTooltip,
FormSubmitError,
} from '@components/FormField';
+import FieldWithPrompt from '@components/FieldWithPrompt';
import FormRow from '@components/FormRow';
import CollapsibleSection from '@components/CollapsibleSection';
import { required } from '@util/validators';
@@ -227,37 +228,31 @@ class JobTemplateForm extends Component {
type="text"
label={i18n._(t`Description`)}
/>
-
- {({ form, field }) => {
- const isValid = !form.touched.job_type || !form.errors.job_type;
- return (
-
-
+
+ {({ form, field }) => {
+ const isValid = !form.touched.job_type || !form.errors.job_type;
+ return (
-
- );
- }}
-
+ );
+ }}
+
+