diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
index d44ca36a5a..0449cdb67b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -41,9 +41,11 @@
             templateUrl: 'views/components/forms/umb-checkbox.html',
             scope: {
                 model: "=",
+                id: "@",
                 value: "@",
                 name: "@",
                 text: "@",
+                serverValidationField: "@",
                 disabled: "=",
                 required: "=",
                 onChange: "&"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
index b11e682da8..2c116ac12f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -1,7 +1,10 @@
 <label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': disabled }">
-    <input type="checkbox" name="{{name}}"
+    <input type="checkbox"
+           id="{{id}}"
+           name="{{name}}"
            value="{{value}}"
            class="umb-form-check__input"
+           val-server-field="{{serverValidationField}}"
            ng-model="model.checked"
            ng-disabled="disabled"
            ng-required="required"
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
index 828f1081d7..3ad25c8194 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
@@ -13,14 +13,15 @@
         <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter track by variant.compositeId" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid || (variant.warnings && variant.warnings.length > 0)}">
             <ng-form name="publishVariantSelectorForm">
                 <div class="flex">
-                    <input id="{{variant.htmlId}}"
-                           name="publishVariantSelector"
-                           type="checkbox"
-                           ng-model="variant.publish"
-                           ng-change="vm.changeSelection(variant)"
-                           ng-disabled="(variant.canPublish === false)"
-                           style="margin-right: 8px;"
-                           val-server-field="{{variant.htmlId}}" />
+
+                    <umb-checkbox
+                        id="{{variant.htmlId}}"
+                        name="publishVariantSelector"
+                        type="checkbox"
+                        model="variant.publish"
+                        on-change="vm.changeSelection(variant)"
+                        disabled="(variant.canPublish === false)"
+                        server-validation-field="{{variant.htmlId}}"/>
                     <div>
                         <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
                             <span>{{ variant.language.name }}</span>