diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
index 79f22c6..bcc997d 100644
--- a/src/assets/scss/components/_checkbox.scss
+++ b/src/assets/scss/components/_checkbox.scss
@@ -28,12 +28,26 @@
         )
     );
 
+    &.control {
+        display: inline-flex;
+        align-items: center;
+
+        .control-label {
+            padding-left: css.getVar("control-padding-horizontal");
+            padding-right: css.getVar("control-padding-horizontal");
+            cursor: pointer;
+        }
+    }
+
     .check {
-        outline: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
         appearance: none;
+        outline: none;
+        cursor: pointer;
         font-size: inherit;
-        width: vars.$checkbox-size;
-        height: vars.$checkbox-size;
+        width: css.getVar("checkbox-size");
+        height: css.getVar("checkbox-size");
         flex-shrink: 0;
         border-radius: css.getVar("checkbox-border-radius");
         border: css.getVar("checkbox-border-width") solid
@@ -73,33 +87,22 @@
         }
     }
 
-    .control-label {
-        padding-left: css.getVar("control-padding-horizontal");
-    }
-
-    &.button {
-        display: flex;
-    }
-
     &.is-disabled {
         opacity: 0.5;
-        cursor: not-allowed;
-    }
+        color: css.getVar("input-disabled-color");
 
-    // size variants
-
-    @include controls.control;
-
-    &.is-small {
-        @include controls.control-small;
-    }
-
-    &.is-medium {
-        @include controls.control-medium;
+        &,
+        input[disabled],
+        .control-label {
+            cursor: unset;
+        }
     }
 
-    &.is-large {
-        @include controls.control-large;
+    // size variants
+    @each $name, $value in vars.$sizes-map {
+        &.is-#{$name} {
+            font-size: #{$value};
+        }
     }
 
     // variant colors
diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
index 8cda015..14fcbf9 100644
--- a/src/assets/scss/components/_radio.scss
+++ b/src/assets/scss/components/_radio.scss
@@ -19,15 +19,28 @@
 
     @include mixins.unselectable;
 
+    &.control {
+        display: inline-flex;
+        align-items: center;
+
+        .control-label {
+            padding-left: css.getVar("control-padding-horizontal");
+            padding-right: css.getVar("control-padding-horizontal");
+            cursor: pointer;
+        }
+    }
+
     .check {
-        outline: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
         appearance: none;
-        // font-size is changed by user agent to lower size
+        outline: none;
+        cursor: pointer;
         font-size: inherit;
         width: css.getVar("radio-size");
         height: css.getVar("radio-size");
         flex-shrink: 0;
-        border-radius: 50%;
+        border-radius: 50% !important;
         border: 2px solid css.getVar("radio-border-color");
         transition: background vars.$speed-slow css.getVar("easing");
         box-shadow: css.getVar("radio-shadow");
@@ -35,8 +48,8 @@
         &:before {
             content: "";
             position: absolute;
-            left: calc(css.getVar("radio-size") * 0.55);
-            top: calc(css.getVar("radio-size") * 0.45);
+            left: 0;
+            top: 0;
             width: css.getVar("radio-size");
             height: css.getVar("radio-size");
             border-radius: 50%;
@@ -76,28 +89,22 @@
         }
     }
 
-    .control-label {
-        padding-left: css.getVar("control-padding-horizontal");
-    }
-
     &.is-disabled {
         opacity: 0.5;
-    }
+        color: css.getVar("input-disabled-color");
 
-    // sizes
-
-    @include controls.control;
-
-    &.is-small {
-        @include controls.control-small;
-    }
-
-    &.is-medium {
-        @include controls.control-medium;
+        &,
+        input[disabled],
+        .control-label {
+            cursor: unset;
+        }
     }
 
-    &.is-large {
-        @include controls.control-large;
+    // size variants
+    @each $name, $value in vars.$sizes-map {
+        &.is-#{$name} {
+            font-size: #{$value};
+        }
     }
 
     // variant colors
diff --git a/src/assets/scss/components/_switch.scss b/src/assets/scss/components/_switch.scss
index 21f9e54..e9b2138 100644
--- a/src/assets/scss/components/_switch.scss
+++ b/src/assets/scss/components/_switch.scss
@@ -20,19 +20,27 @@
 
     @include mixins.unselectable;
 
-    cursor: pointer;
+    &.control {
+        display: inline-flex;
+        align-items: center;
+
+        .control-label {
+            padding-left: css.getVar("control-padding-horizontal");
+            padding-right: css.getVar("control-padding-horizontal");
+            cursor: pointer;
+        }
+    }
 
-    input[type="checkbox"] {
+    .check {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
+        outline: none;
         cursor: pointer;
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
         font-size: inherit;
         width: css.getVar("switch-width");
         padding: css.getVar("switch-padding");
+        flex-shrink: 0;
         background: css.getVar("switch-background-color");
         border-radius: css.getVar("radius");
         transition:
@@ -110,22 +118,17 @@
 
     &.has-left-label {
         flex-direction: row-reverse;
-
-        .control-label {
-            padding-right: css.getVar("control-padding-horizontal");
-        }
-    }
-
-    &:not(.has-left-label) {
-        .control-label {
-            padding-left: css.getVar("control-padding-horizontal");
-        }
     }
 
     &.is-disabled {
         opacity: 0.5;
-        cursor: not-allowed;
         color: css.getVar("input-disabled-color");
+
+        &,
+        input[disabled],
+        .control-label {
+            cursor: unset;
+        }
     }
 
     &.is-rounded input {
@@ -136,20 +139,11 @@
         }
     }
 
-    // sizes
-
-    @include controls.control;
-
-    &.is-small {
-        @include controls.control-small;
-    }
-
-    &.is-medium {
-        @include controls.control-medium;
-    }
-
-    &.is-large {
-        @include controls.control-large;
+    // size variants
+    @each $name, $value in vars.$sizes-map {
+        &.is-#{$name} {
+            font-size: #{$value};
+        }
     }
 
     // variant colors
diff --git a/src/plugins/theme.ts b/src/plugins/theme.ts
index cc38f82..cf275cf 100644
--- a/src/plugins/theme.ts
+++ b/src/plugins/theme.ts
@@ -70,7 +70,7 @@ const bulmaConfig: OrugaOptions = {
     },
     checkbox: {
         override: true,
-        rootClass: "checkbox",
+        rootClass: "checkbox control",
         disabledClass: "is-disabled",
         inputClass: "check",
         labelClass: "control-label",
@@ -79,7 +79,7 @@ const bulmaConfig: OrugaOptions = {
     },
     radio: {
         override: true,
-        rootClass: "radio",
+        rootClass: "radio control",
         disabledClass: "is-disabled",
         inputClass: "check",
         labelClass: "control-label",
@@ -88,7 +88,7 @@ const bulmaConfig: OrugaOptions = {
     },
     switch: {
         override: true,
-        rootClass: "switch",
+        rootClass: "switch control",
         inputClass: "check",
         positionClass: (value) => `has-${value}-label`,
         roundedClass: "is-rounded",