diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less
index a0be9a31a7..81dc40c580 100644
--- a/awx/ui/client/lib/components/_index.less
+++ b/awx/ui/client/lib/components/_index.less
@@ -15,3 +15,4 @@
 @import 'utility/_index';
 @import 'code-mirror/_index';
 @import 'cards/_index';
+@import 'switch/_index';
diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js
index f6ae129858..8080175627 100644
--- a/awx/ui/client/lib/components/index.js
+++ b/awx/ui/client/lib/components/index.js
@@ -44,6 +44,7 @@ import truncate from '~components/truncate/truncate.directive';
 import atCodeMirror from '~components/code-mirror';
 import card from '~components/cards/card.directive';
 import cardGroup from '~components/cards/group.directive';
+import atSwitch from '~components/switch/switch.directive';
 
 import BaseInputController from '~components/input/base.controller';
 import ComponentsStrings from '~components/components.strings';
@@ -98,6 +99,7 @@ angular
     .directive('atTruncate', truncate)
     .directive('atCard', card)
     .directive('atCardGroup', cardGroup)
+    .directive('atSwitch', atSwitch)
     .service('BaseInputController', BaseInputController)
     .service('ComponentsStrings', ComponentsStrings);
 
diff --git a/awx/ui/client/src/shared/switch.block.less b/awx/ui/client/lib/components/switch/_index.less
similarity index 100%
rename from awx/ui/client/src/shared/switch.block.less
rename to awx/ui/client/lib/components/switch/_index.less
diff --git a/awx/ui/client/lib/components/switch/switch.directive.js b/awx/ui/client/lib/components/switch/switch.directive.js
new file mode 100644
index 0000000000..cf33d29f55
--- /dev/null
+++ b/awx/ui/client/lib/components/switch/switch.directive.js
@@ -0,0 +1,22 @@
+const templateUrl = require('~components/switch/switch.partial.html');
+
+function atSwitch () {
+    return {
+        restrict: 'E',
+        replace: true,
+        templateUrl,
+        scope: {
+            hide: '=',
+            onToggle: '&',
+            switchOn: '=',
+            switchDisabled: '=',
+            tooltip: '=',
+            tooltipString: '@',
+            tooltipPlacement: '@',
+            tooltipContainer: '@',
+            tooltipWatch: '='
+        },
+    };
+}
+
+export default atSwitch;
diff --git a/awx/ui/client/lib/components/switch/switch.partial.html b/awx/ui/client/lib/components/switch/switch.partial.html
new file mode 100644
index 0000000000..59dde21588
--- /dev/null
+++ b/awx/ui/client/lib/components/switch/switch.partial.html
@@ -0,0 +1,6 @@
+<span class="awxSwitch-outer" ng-hide="hide" ng-class="{'awxSwitch-on': switchOn, 'awxSwitch-disabled': switchDisabled}" aw-tool-tip="{{tooltipString ? tooltipString : tooltip}}" data-placement="{{tooltipPlacement}}" data-tip-watch="tooltipWatch">
+    <span class="awxSwitch-inner" ng-click="onToggle()">
+        <span class="awxSwitch-slider"></span>
+        <i class="fa fa-check"></i>
+    </span>
+</span>
\ No newline at end of file
diff --git a/awx/ui/client/lib/theme/index.less b/awx/ui/client/lib/theme/index.less
index eb289aff5a..a9f9d2bdde 100644
--- a/awx/ui/client/lib/theme/index.less
+++ b/awx/ui/client/lib/theme/index.less
@@ -108,7 +108,6 @@
 @import '../../src/shared/media-object.block.less';
 @import '../../src/shared/text-label';
 @import '../../src/shared/upgrade/upgrade.block.less';
-@import '../../src/shared/switch.block.less';
 @import '../../src/smart-status/smart-status.block.less';
 @import '../../src/workflow-results/standard-out.block.less';
 @import '../../src/templates/prompt/prompt.block.less';
diff --git a/awx/ui/client/src/configuration/forms/system-form/configuration-system.partial.html b/awx/ui/client/src/configuration/forms/system-form/configuration-system.partial.html
index 4a20835129..0a32b40b95 100644
--- a/awx/ui/client/src/configuration/forms/system-form/configuration-system.partial.html
+++ b/awx/ui/client/src/configuration/forms/system-form/configuration-system.partial.html
@@ -35,12 +35,7 @@
                             <i class="fa fa-question-circle"></i>
                         </a>
                     </label>
-                    <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': LOG_AGGREGATOR_ENABLED, 'awxSwitch-disabled': (!LOG_AGGREGATOR_ENABLED && (!requiredLogValues.LOG_AGGREGATOR_HOST || requiredLogValues.LOG_AGGREGATOR_HOST === '' || !requiredLogValues.LOG_AGGREGATOR_TYPE || requiredLogValues.LOG_AGGREGATOR_TYPE === '')) || $rootScope.user_is_system_auditor}">
-                        <span class="awxSwitch-inner" ng-click="toggleForm('LOG_AGGREGATOR_ENABLED')">
-                            <span class="awxSwitch-slider"></span>
-                            <i class="fa fa-check"></i>
-                        </span>
-                    </span>
+                    <at-switch on-toggle="toggleForm('LOG_AGGREGATOR_ENABLED')" switch-on="LOG_AGGREGATOR_ENABLED" switch-disabled="(!LOG_AGGREGATOR_ENABLED && (!requiredLogValues.LOG_AGGREGATOR_HOST || requiredLogValues.LOG_AGGREGATOR_HOST === '' || !requiredLogValues.LOG_AGGREGATOR_TYPE || requiredLogValues.LOG_AGGREGATOR_TYPE === '')) || $rootScope.user_is_system_auditor"></at-switch>
                 </div>
                 <div id="system-logging-form">
 
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index 0afd4d99be..06524af963 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@@ -45,12 +45,7 @@
             <at-row ng-repeat="instance in vm.instances"
                 ng-class="{'at-Row--active': (instance.id === vm.activeId)}">
                 <div class="at-Row-toggle">
-                    <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': instance.enabled, 'awxSwitch-disabled': vm.rowAction.toggle._disabled}">
-                        <span class="awxSwitch-inner" ng-click="vm.toggle(instance)">
-                            <span class="awxSwitch-slider"></span>
-                            <i class="fa fa-check"></i>
-                        </span>
-                    </span>
+                    <at-switch on-toggle="vm.toggle(instance)" switch-on="instance.enabled" switch-disabled="vm.rowAction.toggle._disabled"></at-switch>
                 </div>
 
                 <div class="at-Row-items at-Row-items--instances">
diff --git a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
index baa70f694a..d8e5e684e8 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
+++ b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
@@ -52,12 +52,7 @@
                     <div class="List-staticColumnLayout--hosts List-tableRow" ng-repeat="host in hosts track by host.id">
                             <div></div>
                             <div class="List-tableCell toggleHost-column List-staticColumn--toggle">
-                                <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': host.enabled, 'awxSwitch-disabled': false}" aw-tool-tip="{{strings.get('hostList.DISABLED_TOGGLE_TOOLTIP')}}" data-placement="right">
-                                    <span class="awxSwitch-inner" ng-click="toggleHost($event, host)">
-                                        <span class="awxSwitch-slider"></span>
-                                        <i class="fa fa-check"></i>
-                                    </span>
-                                </span>
+                                <at-switch on-toggle="toggleHost($event, host)" switch-on="host.enabled" switch-disabled="!host.summary_fields.user_capabilities.edit" tooltip="strings.get('hostList.DISABLED_TOGGLE_TOOLTIP')" tooltip-placement="right"></at-switch>
                             </div>
                             <div class="List-tableCell active_failures-column status-column List-staticColumn--smallStatus">
                                 <div class="host-name">
diff --git a/awx/ui/client/src/partials/survey-maker-modal.html b/awx/ui/client/src/partials/survey-maker-modal.html
index e4f4c542b4..2809a93591 100644
--- a/awx/ui/client/src/partials/survey-maker-modal.html
+++ b/awx/ui/client/src/partials/survey-maker-modal.html
@@ -22,12 +22,7 @@
     <div class="SurveyMaker-header">
         <div class="SurveyMaker-title">
             <div class="SurveyMaker-titleText">{{name || "New Job Template"}}<div class="SurveyMaker-titleLockup"></div><span translate>SURVEY</span></div>
-            <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': survey_enabled, 'awxSwitch-disabled': (!job_template_obj.summary_fields.user_capabilities.edit && !workflow_job_template_obj.summary_fields.user_capabilities.edit && !canAdd)}" aw-tool-tip="surveyEnabledTooltip" data-container="#survey-modal-dialog" data-placement="right" data-tip-watch="surveyEnabledTooltip">
-                <span class="awxSwitch-inner" ng-click="toggleSurveyEnabled()">
-                    <span class="awxSwitch-slider"></span>
-                    <i class="fa fa-check"></i>
-                </span>
-            </span>
+            <at-switch on-toggle="toggleSurveyEnabled()" switch-on="survey_enabled" switch-disabled="(!job_template_obj.summary_fields.user_capabilities.edit && !workflow_job_template_obj.summary_fields.user_capabilities.edit && !canAdd)" tooltip="surveyEnabledTooltip" tooltip-placement="right" tooltip-watch="surveyEnabledTooltip"></at-switch>
         </div>
         <div class="SurveyMaker-close">
             <button class="SurveyMaker-exit" ng-click="closeSurvey('survey-modal-dialog')"><i class="fa fa-times-circle"></i></button>
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 90a99d33d5..994ec53a89 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -514,12 +514,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 if (field.type === 'toggle'){
                     html += `
                         <div class="Field-header--${key} ${field['class']} ${field.columnClass}">
-                            <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': ${"flag" in field} ? ${form.iterator}.${field.flag} : ${form.iterator}.enabled, 'awxSwitch-disabled': ${"ngDisabled" in field} ? ${field.ngDisabled} : false}" aw-tool-tip="${field.awToolTip}" data-placement="${field.dataPlacement ? field.dataPlacement : 'right'}" data-tip-watch="${field.dataTipWatch}">
-                                <span class="awxSwitch-inner" ng-click="${field.ngClick}">
-                                    <span class="awxSwitch-slider"></span>
-                                    <i class="fa fa-check"></i>
-                                </span>
-                            </span>
+                            <at-switch on-toggle="${field.ngClick}" switch-on="${"flag" in field} ? ${form.iterator}.${field.flag} : ${form.iterator}.enabled" switch-disabled="${"ngDisabled" in field} ? ${field.ngDisabled} : false" tooltip-string="${field.awToolTip}" tooltip-placement="${field.dataPlacement ? field.dataPlacement : 'right'}"></at-switch>
                         </div>
                     `;
                 } else if (field.type === 'html') {
@@ -673,12 +668,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 if (field.type === 'toggle'){
                     html += `
                         <td class="List-tableCell-${fld}-column ${field['class']} ${field.columnClass}">
-                            <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': ${"flag" in field} ? ${form.iterator}.${field.flag} : ${form.iterator}.enabled, 'awxSwitch-disabled': ${"ngDisabled" in field} ? ${field.ngDisabled} : false}" aw-tool-tip="${field.awToolTip}" data-placement="${field.dataPlacement ? field.dataPlacement : 'right'}" data-tip-watch="${field.dataTipWatch}">
-                                <span class="awxSwitch-inner" ng-click="${field.ngClick}">
-                                    <span class="awxSwitch-slider"></span>
-                                    <i class="fa fa-check"></i>
-                                </span>
-                            </span>
+                            <at-switch on-toggle="${field.ngClick}" switch-on="${"flag" in field} ? ${form.iterator}.${field.flag} : ${form.iterator}.enabled" switch-disabled="${"ngDisabled" in field} ? ${field.ngDisabled} : false" tooltip-string="${field.awToolTip}" tooltip-placement="${field.dataPlacement ? field.dataPlacement : 'right'}"></at-switch>
                         </td>
                     `;
                 }
@@ -737,12 +727,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                         html += `
                             <div>
-                                <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': ${field.toggleSource}, 'awxSwitch-disabled': ${"ngDisabled" in field} ? ${field.ngDisabled} : false}" ng-show="${"ngShow" in field ? field.ngShow : true}">
-                                    <span class="awxSwitch-inner" ng-click="toggleForm('${field.toggleSource}')">
-                                        <span class="awxSwitch-slider"></span>
-                                        <i class="fa fa-check"></i>
-                                    </span>
-                                </span>
+                                <at-switch on-toggle="toggleForm('${field.toggleSource}')" switch-on="${field.toggleSource}" switch-disabled="${"ngDisabled" in field} ? ${field.ngDisabled} : false" hide="!(${"ngShow" in field ? field.ngShow : true})"></at-switch>
                             </div>
                         `;
                     }
diff --git a/awx/ui/client/src/shared/generator-helpers.js b/awx/ui/client/src/shared/generator-helpers.js
index 84fe68fed5..18907f78d4 100644
--- a/awx/ui/client/src/shared/generator-helpers.js
+++ b/awx/ui/client/src/shared/generator-helpers.js
@@ -529,12 +529,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
             } else if (field.type === 'toggle') {
                 html += `
                     <div class="awxSwitch-listTableCell ${field}-column ${field['class']} ${field.columnClass}">
-                        <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': ${"flag" in field} ? ${list.iterator}.${field.flag} : ${list.iterator}.enabled, 'awxSwitch-disabled': ${"ngDisabled" in field} ? ${field.ngDisabled} : false}" aw-tool-tip="${field.awToolTip}" data-placement="${field.dataPlacement ? field.dataPlacement : 'right'}" data-tip-watch="${field.dataTipWatch}">
-                            <span class="awxSwitch-inner" ng-click="${field.ngClick}">
-                                <span class="awxSwitch-slider"></span>
-                                <i class="fa fa-check"></i>
-                            </span>
-                        </span>
+                        <at-switch on-toggle="${field.ngClick}" switch-on="${"flag" in field} ? ${list.iterator}.${field.flag} : ${list.iterator}.enabled" switch-disabled="${"ngDisabled" in field} ? ${field.ngDisabled} : false" tooltip-string="${field.awToolTip}" tooltip-placement="${field.dataPlacement ? field.dataPlacement : 'right'}" tooltip-watch="${field.dataTipWatch}"></at-switch>
                     </div>
                 `;
             } else if (field.type === 'invalid') {
diff --git a/awx/ui/client/src/templates/prompt/steps/other-prompts/prompt-other-prompts.partial.html b/awx/ui/client/src/templates/prompt/steps/other-prompts/prompt-other-prompts.partial.html
index f6eda5d111..ca57599137 100644
--- a/awx/ui/client/src/templates/prompt/steps/other-prompts/prompt-other-prompts.partial.html
+++ b/awx/ui/client/src/templates/prompt/steps/other-prompts/prompt-other-prompts.partial.html
@@ -111,12 +111,7 @@
             </a>
         </label>
         <div>
-            <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': promptData.prompts.diffMode.value, 'awxSwitch-disabled': readOnlyPrompts}">
-                <span class="awxSwitch-inner" ng-click="!readOnlyPrompts && vm.toggleDiff()">
-                    <span class="awxSwitch-slider"></span>
-                    <i class="fa fa-check"></i>
-                </span>
-            </span>
+            <at-switch on-toggle="vm.toggleDiff()" switch-on="promptData.prompts.diffMode.value" switch-disabled="readOnlyPrompts"></at-switch>
         </div>
     </div>
     <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="promptData.launchConf.ask_variables_on_launch && !promptData.prompts.variables.ignore">