diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
index db38ad2635..1c7f212225 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
@@ -22,11 +22,13 @@
             <p><localize key="content_publishDescendantsWithVariantsHelp"></localize></p>
         </div>
 
-        <div style="margin-bottom: 15px;">
-            <label>
-                <input type="checkbox"
-                       ng-model="model.includeUnpublished"
-                       style="margin-right: 8px;" />
+        <div style="margin-bottom: 15px;" class="flex">
+
+            <umb-checkbox
+                input-id="includeUnpublishedSelector"
+                model="model.includeUnpublished" />
+
+            <label for="includeUnpublishedSelector">
                 <localize key="content_includeUnpublished"></localize>
             </label>
         </div>
@@ -40,13 +42,14 @@
             <div class="umb-list-item umb-list--condensed" ng-repeat="variant in vm.variants">
                 <ng-form name="publishVariantSelectorForm">
                     <div class="flex">
-                        <input id="{{variant.htmlId}}"
-                               name="publishVariantSelector"
-                               type="checkbox"
-                               ng-model="variant.publish"
-                               ng-change="vm.changeSelection(variant)"
-                               style="margin-right: 8px;"
-                               val-server-field="{{variant.htmlId}}" />
+
+                        <umb-checkbox
+                            input-id="{{variant.htmlId}}"
+                            name="publishVariantSelector"
+                            model="variant.publish"
+                            on-change="vm.changeSelection(variant)"
+                            server-validation-field="{{variant.htmlId}}"/>
+
                         <div>
                             <label for="{{variant.htmlId}}" style="margin-bottom: 0;">
                                 <span>{{ variant.language.name }}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
index b06fc83afd..2bf290b752 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
@@ -87,12 +87,13 @@
             <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter">
                 <ng-form name="scheduleSelectorForm">
                     <div class="flex">
-                        <input id="{{'saveVariantSelector_' + variant.language.culture}}"
-                               name="saveVariantSelector"
-                               type="checkbox"
-                               ng-model="variant.save"
-                               ng-change="vm.changeSelection(variant)"
-                               style="margin-right: 8px;" />
+
+                        <umb-checkbox
+                            input-id="{{'saveVariantSelector_' + variant.language.culture}}"
+                            name="saveVariantSelector"
+                            model="variant.save"
+                            on-change="vm.changeSelection(variant)"/>
+
                         <div>
 
                             <label for="{{'saveVariantSelector_' + variant.language.culture}}" style="margin-bottom: 2px;">
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
index 8f5fc331d0..cb7bcc79af 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
@@ -13,13 +13,14 @@
         <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.modifiedVariantFilter">
             <ng-form name="publishVariantSelectorForm">
                 <div class="flex">
-                    <input id="{{variant.htmlId}}"
-                           name="publishVariantSelector"
-                           type="checkbox"
-                           ng-model="variant.save"
-                           ng-change="vm.changeSelection(variant)"
-                           style="margin-right: 8px;"
-                           val-server-field="{{variant.htmlId}}" />
+
+                    <umb-checkbox
+                        input-id="{{variant.htmlId}}"
+                        name="publishVariantSelector"
+                        model="variant.save"
+                        on-change="vm.changeSelection(variant)"
+                        server-validation-field="{{variant.htmlId}}"/>
+
                     <div>
                         <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
                             <span>{{ variant.language.name }}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
index 52610f18fd..5bc69eeb9e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
@@ -16,14 +16,15 @@
             <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.publishedVariantFilter">
                 <ng-form name="unpublishVariantSelectorForm">
                     <div class="flex">
-                        <input id="{{variant.htmlId}}"
-                                name="unpublishVariantSelector"
-                                type="checkbox"
-                                ng-model="variant.save"
-                                ng-change="vm.changeSelection(variant)"
-                                ng-disabled="variant.disabled"
-                                style="margin-right: 8px;"
-                                val-server-field="{{variant.htmlId}}" />
+
+                        <umb-checkbox
+                            input-id="{{variant.htmlId}}"
+                            name="unpublishVariantSelector"
+                            model="variant.save"
+                            on-change="vm.changeSelection(variant)"
+                            disabled="variant.disabled"
+                            server-validation-field="{{variant.htmlId}}"/>
+
                         <div>
                             <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
                                 <span>{{ variant.language.name }}</span>