diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index cc8380c721..6459b5ca60 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -2296,3 +2296,4 @@ html input[disabled] {
 .CodeMirror--disabled .CodeMirror-cursors {
     display: none;
 }
+
diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less
index 23f49bde58..4ee8ecfa6e 100644
--- a/awx/ui/client/legacy-styles/forms.less
+++ b/awx/ui/client/legacy-styles/forms.less
@@ -478,6 +478,28 @@ input[type='radio']:checked:before {
     width: 100%;
     display: block !important;
 }
+
+.Form-inputLabelContainer[for=variables] {
+    width: auto;
+    display: inline-block !important;
+}
+
+.FormToggle {}
+.FormToggle-container {
+    float: right;
+    margin: 0 0 0 10px;
+    padding-bottom: 5px;
+
+    .btn.btn-xs {
+        padding: 0px 10px;
+    }
+
+    input {
+        visibility: hidden;
+        position: absolute;
+    }
+}
+
 .Form-inputLabel{
     text-transform: uppercase;
     color: @default-interface-txt;
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index a1a2a6761f..4030aa2183 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -659,14 +659,26 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += (field.hintText) ? "\n\t\t<span class=\"label-hint-text\">\n\t\t\t<i class=\"fa fa-info-circle\">\n\t\t\t</i>\n\t\t\tHint: " + field.hintText + "\n\t\t</span>" : "";
                         // Variable editing
                         if (fld === "variables" || fld === "extra_vars" || _.last(fld.split('_')) === 'variables' || fld === 'source_vars') {
-                            html += "<div class=\"parse-selection\" id=\"" + form.name + "_" + fld + "_parse_type\">" +
-                                "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
-                            html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
-                            html += "\" value=\"yaml\" ng-change=\"parseTypeChange('" + ((field.parseTypeName) ? field.parseTypeName : 'parseType') + "', '" + fld + "'" + ")\"> <span class=\"parse-label\">YAML</span>\n";
-                            html += "<input type=\"radio\" ng-disabled=\"disableParseSelection\" ng-model=\"";
-                            html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
-                            html += "\" value=\"json\" ng-change=\"parseTypeChange('" + ((field.parseTypeName) ? field.parseTypeName : 'parseType')+ "', '" + fld + "'" + ")\"> <span class=\"parse-label\">JSON</span>\n";
-                            html += "</div>\n";
+                            let parseTypeId = `${form.name}_${fld}_parse_type`;
+                            let parseTypeName = field.parseTypeName || 'parseType';
+                            let getToggleClass = (primary, secondary) => `{
+                                'btn-primary': ${parseTypeName} === '${primary}',
+                                'btn-default' : ${parseTypeName} === '${secondary}'
+                            }`;
+                            let toggleLeftClass = getToggleClass('yaml', 'json');
+                            let toggleRightClass = getToggleClass('json', 'yaml');
+
+                            html += `
+                                <div class="FormToggle-container" id="${parseTypeId}">
+                                    <div class="btn-group">
+                                        <label ng-class="${toggleLeftClass}" class="btn btn-xs">
+                                            <input type="radio" value="yaml" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />YAML
+                                        </label>
+                                        <label ng-class="${toggleRightClass}" class="btn btn-xs btn-default">
+                                            <input type="radio" value="json" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />JSON
+                                        </label>
+                                    </div>
+                                </div>`;
                         }
 
                         if (field.labelAction) {