diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 9b9be85053..14ff4b299a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -101,7 +101,7 @@
 @import "components/umb-confirm-action.less";
 @import "components/umb-keyboard-shortcuts-overview.less";
 @import "components/umb-checkbox-list.less";
-@import "components/umb-radiobuttons-list.less";
+@import "components/umb-form-control.less";
 @import "components/umb-locked-field.less";
 @import "components/umb-tabs.less";
 @import "components/umb-load-indicator.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
index 4e84df2350..985e57bea5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
@@ -68,102 +68,3 @@
   font-size: 16px;
   line-height: 1.8em;
 }
-
-
-/* Styling for the .umb-checkboxlist class - Styling added 28-10-2018 using BEM syntax */
-.umb-checkboxlist{
-
-    ul{
-        float: left;
-    }
-
-    &__item{
-        line-height: 1;
-        margin: 0 0 5px;
-    }
-
-    &__label{
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        position: relative;
-        padding: 0;
-        margin: 0;
-
-        &-text{
-            margin: 0 0 0 26px;
-            position: relative;
-            top: 2px;
-        }
-    }
-
-    &__input{
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-
-        &:checked:focus ~ .umb-checkboxlist__state .umb-checkboxlist__check,
-        &:focus ~ .umb-checkboxlist__state .umb-checkboxlist__check{
-            border-color: @gray-5;
-        }
-
-        &:checked ~ .umb-checkboxlist__state .umb-checkboxlist__check{
-            border-color: @green;
-
-            &:before{
-                width: @checkboxWidth;
-                height: @checkboxHeight;
-            }
-        }
-
-        &:checked ~ .umb-checkboxlist__state .umb-checkboxlist__icon{
-            opacity: 1;
-        }
-    }
-
-    &__state{
-        height: 17px;
-        position: absolute;
-        top: 2px;
-        left: 0;
-    }
-
-    &__check{
-        position: relative;
-        border: 1px solid @gray-7;
-        width: @checkboxWidth;
-        height: @checkboxHeight;
-
-        &:before{
-            content: "";
-            background: @green;
-            width: 0;
-            height: 0;
-            transition: .05s ease-out;
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            margin: auto;
-        }
-    }
-
-    &__icon{
-        color: @white;
-        text-align: center;
-        font-size: 10px;
-        opacity: 0;
-        transition: .2s ease-out;
-
-        &:before{
-            position: absolute;
-            top: -2px;
-            right: 0;
-            left: 0;
-            bottom: 0;
-            margin: auto;
-        }
-    }
-}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-form-control.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-control.less
new file mode 100644
index 0000000000..5e672758c1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-control.less
@@ -0,0 +1,120 @@
+@checkboxWidth: 15px;
+@checkboxHeight: 15px;
+
+.umb-form-control{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    position: relative;
+    padding: 0;
+    margin: 0;
+
+    &__text{
+        margin: 0 0 0 26px;
+        position: relative;
+        top: 2px;
+    }
+
+    &__input{
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+
+        &:focus:checked ~ .umb-form-control .umb-form-control__check,
+        &:focus ~ .umb-form-control__state .umb-form-control__check{
+            border-color: @gray-5;
+        }
+
+        &:checked ~ .umb-form-control__state .umb-form-control__check{
+            border-color: @green;
+        }
+
+        // This only happens if the state has a radiobutton modifier
+        &:checked ~ .umb-form-control__state--radiobutton .umb-form-control__check{
+            &:before{
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        // This only happens if state has the checkbox modifier
+        &:checked ~ .umb-form-control__state--checkbox{
+            .umb-form-control__check{
+                &:before{
+                    width: @checkboxWidth;
+                    height: @checkboxHeight;
+                }
+            }
+
+            .umb-form-control__icon{
+                opacity: 1;
+            }
+        }
+    }
+
+    &__state{
+        height: 17px;
+        position: absolute;
+        top: 2px;
+        left: 0;
+    }
+
+    &__check{
+        position: relative;
+        border: 1px solid @gray-7;
+        width: @checkboxWidth;
+        height: @checkboxHeight;
+
+        &:before{
+            content: "";
+            background: @green;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+        }
+
+        // This only happens if state has the radiobutton modifier
+        .umb-form-control__state--radiobutton &{
+            border-radius: 100%;
+
+            &:before{
+                width: 9px;
+                height: 9px;
+                border-radius: 100%;
+                opacity: 0;
+                transform: scale(0);
+                transition: .15s ease-out;
+            }
+        }
+
+        // This only happens if state has the checkbox modifier
+        .umb-form-control__state--checkbox &{
+            &:before{
+                width: 0;
+                height: 0;
+                transition: .05s ease-out;
+            }
+        }
+    }
+
+    &__icon{
+        color: @white;
+        text-align: center;
+        font-size: 10px;
+        opacity: 0;
+        transition: .2s ease-out;
+
+        &:before{
+            position: absolute;
+            top: -2px;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            margin: auto;
+        }
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-radiobuttons-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-radiobuttons-list.less
deleted file mode 100644
index 31952c1751..0000000000
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-radiobuttons-list.less
+++ /dev/null
@@ -1,81 +0,0 @@
-@checkboxWidth: 15px;
-@checkboxHeight: 15px;
-
-.umb-radiobuttons{
-    ul{
-        float: left;
-    }
-
-    &__item{
-        line-height: 1;
-        margin: 0 0 5px;
-    }
-
-    &__label{
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        position: relative;
-        padding: 0;
-        margin: 0;
-
-        &-text{
-            margin: 0 0 0 26px;
-            position: relative;
-            top: 2px;
-        }
-    }
-
-    &__input{
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-
-        &:focus:checked ~ .umb-radiobuttons__state .umb-radiobuttons__check,
-        &:focus ~ .umb-radiobuttons__state .umb-radiobuttons__check{
-            border-color: @gray-5;
-        }
-
-        &:checked ~ .umb-radiobuttons__state .umb-radiobuttons__check{
-            border-color: @green;
-
-            &:before{
-                opacity: 1;
-                transform: scale(1);
-            }
-        }
-    }
-
-    &__state{
-        height: 17px;
-        position: absolute;
-        top: 2px;
-        left: 0;
-    }
-
-    &__check{
-        position: relative;
-        border: 1px solid @gray-7;
-        width: @checkboxWidth;
-        height: @checkboxHeight;
-        border-radius: 100%;
-
-        &:before{
-            content: "";
-            background: @green;
-            width: 9px;
-            height: 9px;
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            margin: auto;
-            border-radius: 100%;
-            opacity: 0;
-            transform: scale(0);
-            transition: .15s ease-out;
-        }
-    }
-}
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 73de7aeee7..c138eccc5d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -13,7 +13,16 @@
 
 	&-push {
 		float:right;
-	}
+    }
+
+    &--list{
+        float: left;
+    }
+
+    &__item{
+        line-height: 1;
+        margin: 0 0 5px;
+    }
 }
 
 .umb-editor-tiny {
@@ -246,7 +255,7 @@ div.umb-codeeditor .umb-btn-toolbar {
         margin: 24px 0 0;
         display: flex;
     }
-    
+
     &__input {
         width: 100%;
         &-wrap{
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
index 8330c8947b..b4ed2c3b10 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
@@ -1,20 +1,20 @@
-<div class="umb-editor umb-checkboxlist" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
+<div class="umb-editor umb-editor--list" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
 
     <ul class="unstyled">
-        <li ng-repeat="item in selectedItems" class="umb-checkboxlist__item">
-            <label class="checkbox umb-checkboxlist__label">
+        <li ng-repeat="item in selectedItems" class="umb-editor__item">
+            <label class="checkbox umb-form-control">
                 <input type="checkbox" name="checkboxlist"
                        value="{{item.key}}"
                        ng-model="item.checked"
-                       class="umb-checkboxlist__input"
+                       class="umb-form-control__input"
                        ng-required="model.validation.mandatory && !model.value.length" />
 
-                <div class="umb-checkboxlist__state" aria-hidden="true">
-                    <div class="umb-checkboxlist__check">
-                        <i class="umb-checkboxlist__icon icon-check"></i>
+                <div class="umb-form-control__state umb-form-control__state--checkbox" aria-hidden="true">
+                    <div class="umb-form-control__check">
+                        <i class="umb-form-control__icon icon-check"></i>
                     </div>
                 </div>
-                <span class="umb-checkboxlist__label-text">{{item.val}}</span>
+                <span class="umb-form-control__text">{{item.val}}</span>
             </label>
         </li>
     </ul>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html
index a1ab5e0f44..9518330f9a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html
@@ -1,19 +1,17 @@
-<div class="umb-editor umb-radiobuttons" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
+<div class="umb-editor umb-edtitor--list" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
     <ul class="unstyled">
 
-        <li ng-repeat="item in model.config.items" class="umb-radiobuttons__item">
-            <label class="radio umb-radiobuttons__label">
+        <li ng-repeat="item in model.config.items" class="umb-editor__item">
+            <label class="radio umb-form-control">
                 <input type="radio" name="radiobuttons-{{model.alias}}"
                     value="{{item.id}}"
                     ng-model="model.value"
-                    class="umb-radiobuttons__input" />
+                    class="umb-form-control__input" />
 
-                <div class="umb-radiobuttons__state" aria-hidden="true">
-                    <div class="umb-radiobuttons__check">
-                        <!-- <i class="umb-radiobuttons__icon icon-check" aria-hidden="true"></i> -->
-                    </div>
+                <div class="umb-form-control__state umb-form-control__state--radiobutton" aria-hidden="true">
+                    <div class="umb-form-control__check"></div>
                 </div>
-                <span class="umb-radiobuttons__label-text">{{item.value}}</span>
+                <span class="umb-form-control__text">{{item.value}}</span>
             </label>
         </li>
     </ul>