diff --git a/packages/bootstrap/scss/checkbox/_variables.scss b/packages/bootstrap/scss/checkbox/_variables.scss
index da0a2f1f25f..85f48801138 100644
--- a/packages/bootstrap/scss/checkbox/_variables.scss
+++ b/packages/bootstrap/scss/checkbox/_variables.scss
@@ -1,142 +1,161 @@
 // Checkbox
 
-$checkbox-size: map-get( $spacing, 4 ) !default;
-$checkbox-radius: map-get( $spacing, 1 ) !default;
 /// Border width of checkbox.
 /// @group checkbox
-$checkbox-border-width: 1px !default;
+$kendo-checkbox-border-width: 1px !default;
+
+// Checkbox sizes
+$kendo-checkbox-sizes: (
+    sm: (
+        size: map-get( $spacing, 3 ),
+        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 3 ) * 3
+    ),
+    md: (
+        size: map-get( $spacing, 4 ),
+        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 4 ) * 3
+    ),
+    lg: (
+        size: map-get( $spacing, 5 ),
+        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 5 ) * 3
+    )
+) !default;
 
 /// Background color of checkbox.
 /// @group checkbox
-$checkbox-bg: $component-bg !default;
+$kendo-checkbox-bg: $component-bg !default;
 /// Color of checkbox.
 /// @group checkbox
-$checkbox-text: null !default;
+$kendo-checkbox-text: null !default;
 /// Border color of checkbox.
 /// @group checkbox
-$checkbox-border: contrast-wcag( $checkbox-bg, $gray-400, $gray-600 ) !default;
+$kendo-checkbox-border: contrast-wcag( $kendo-checkbox-bg, $gray-400, $gray-600 ) !default;
 
 /// Background color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-bg: null !default;
+$kendo-checkbox-hover-bg: null !default;
 /// Color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-text: null !default;
+$kendo-checkbox-hover-text: null !default;
 /// Border color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-border: null !default;
+$kendo-checkbox-hover-border: null !default;
 
 /// Background color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-bg: $primary !default;
+$kendo-checkbox-checked-bg: $primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-border: $checkbox-checked-bg !default;
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// Background color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-bg: $checkbox-checked-bg !default;
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
 /// Color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-text: $checkbox-checked-text !default;
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
 /// Border color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-border: $checkbox-checked-border !default;
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
 /// Border color of focused checkbox.
 /// @group checkbox
-$checkbox-focused-border: try-tint( $primary, 50% ) !default;
+$kendo-checkbox-focus-border: try-tint( $primary, 50% ) !default;
 /// Box shadow of focused checkbox.
 /// @group checkbox
-$checkbox-focused-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
 /// Border color of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-border: $checkbox-checked-border !default;
+$kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
 /// Box shadow of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-shadow: $checkbox-focused-shadow !default;
+$kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-shadow !default;
 
 /// Background color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-bg: null !default;
+$kendo-checkbox-disabled-bg: null !default;
 /// Color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-text: null !default;
+$kendo-checkbox-disabled-text: null !default;
 /// Border color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-border: null !default;
+$kendo-checkbox-disabled-border: null !default;
 
 /// Background color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-bg: null !default;
+$kendo-checkbox-disabled-checked-bg: null !default;
 /// Color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-text: null !default;
-/// Border color of disabled and checked checkbox.
+$kendo-checkbox-disabled-checked-text: null !default;
+/// Color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-border: null !default;
+$kendo-checkbox-disabled-checked-border: null !default;
 
 /// Background color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-bg: null !default;
+$kendo-checkbox-invalid-bg: null !default;
 /// Color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-text: $invalid-text !default;
+$kendo-checkbox-invalid-text: $invalid-text !default;
 /// Border color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-border: $invalid-border !default;
+$kendo-checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
 
 /// Type of checkbox indicator.
 /// @group checkbox
-$checkbox-indicator-type: image !default;
+$kendo-checkbox-indicator-type: image !default;
 
 /// Glyph font family of checkbox indicator.
 /// @group checkbox
-$checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-$checkbox-glyph-size: $checkbox-size !default;
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 /// Glyph of checkbox indicator.
 /// @group checkbox
-$checkbox-checked-glyph: "\e118" !default;
+$kendo-checkbox-checked-glyph: "\e118" !default;
 /// Glyph of indeterminate checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-glyph: "\e121" !default;
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
 
 
 // Checkbox label
-$checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+/// The horizontal margin of the checkbox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-x: 0px !default;
+$kendo-checkbox-list-item-padding-x: 0px !default;
 /// Vertical padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-y: $list-item-padding-y !default;
+$kendo-checkbox-list-item-padding-y: $list-item-padding-y !default;
 
 
 // Checkbox ripple
-$checkbox-ripple-size: $checkbox-size * 3 !default;
+
 /// Background color of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-bg: $checkbox-checked-bg !default;
+$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
 /// Opacity of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-opacity: .25 !default;
+$kendo-checkbox-ripple-opacity: .25 !default;
diff --git a/packages/bootstrap/scss/radio/_variables.scss b/packages/bootstrap/scss/radio/_variables.scss
index ec1f3a11ddb..98ddc250131 100644
--- a/packages/bootstrap/scss/radio/_variables.scss
+++ b/packages/bootstrap/scss/radio/_variables.scss
@@ -10,76 +10,76 @@ $radio-border-width: 1px !default;
 
 /// Background color of radio button.
 /// @group radio
-$radio-bg: $checkbox-bg !default;
+$radio-bg: $kendo-checkbox-bg !default;
 /// Color of radio button.
 /// @group radio
-$radio-text: $checkbox-text !default;
+$radio-text: $kendo-checkbox-text !default;
 /// Border color of radio button.
 /// @group radio
-$radio-border: $checkbox-border !default;
+$radio-border: $kendo-checkbox-border !default;
 
 /// Background color of hovered radio button.
 /// @group radio
-$radio-hovered-bg: $checkbox-hovered-bg !default;
+$radio-hovered-bg: $kendo-checkbox-hover-bg !default;
 /// Color of hovered radio button.
 /// @group radio
-$radio-hovered-text: $checkbox-hovered-text !default;
+$radio-hovered-text: $kendo-checkbox-hover-text !default;
 /// Border color of hovered radio button.
 /// @group radio
-$radio-hovered-border: $checkbox-hovered-border !default;
+$radio-hovered-border: $kendo-checkbox-hover-border !default;
 
 /// Background color of checked radio button.
 /// @group radio
-$radio-checked-bg: $checkbox-checked-bg !default;
+$radio-checked-bg: $kendo-checkbox-checked-bg !default;
 /// Color of checked radio button.
 /// @group radio
-$radio-checked-text: $checkbox-checked-text !default;
+$radio-checked-text: $kendo-checkbox-checked-text !default;
 /// Border color of checked radio button.
 /// @group radio
-$radio-checked-border: $checkbox-checked-border !default;
+$radio-checked-border: $kendo-checkbox-checked-border !default;
 
 /// Border color of focused radio button.
 /// @group radio
-$radio-focused-border: $checkbox-hovered-border !default;
+$radio-focused-border: $kendo-checkbox-focus-border !default;
 /// Box shadow of focused radio button.
 /// @group radio
-$radio-focused-shadow: $checkbox-focused-shadow !default;
+$radio-focused-shadow: $kendo-checkbox-focus-shadow !default;
 /// Border color of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-border: $checkbox-checked-border !default;
+$radio-focused-checked-border: $kendo-checkbox-focus-checked-border !default;
 /// Box shadow of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
+$radio-focused-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
 
 /// Background color of disabled radio button.
 /// @group radio
-$radio-disabled-bg: $checkbox-disabled-bg !default;
+$radio-disabled-bg: $kendo-checkbox-disabled-bg !default;
 /// Color of disabled radio button.
 /// @group radio
-$radio-disabled-text: $checkbox-disabled-text !default;
+$radio-disabled-text: $kendo-checkbox-disabled-text !default;
 /// Border color of disabled radio button.
 /// @group radio
-$radio-disabled-border: $checkbox-disabled-border !default;
+$radio-disabled-border: $kendo-checkbox-disabled-border !default;
 
 /// Background color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-bg: $checkbox-disabled-checked-bg !default;
+$radio-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg !default;
 /// Color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-text: $checkbox-disabled-checked-text !default;
+$radio-disabled-checked-text: $kendo-checkbox-disabled-checked-text !default;
 /// Border color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-border: $checkbox-disabled-checked-border !default;
+$radio-disabled-checked-border: $kendo-checkbox-disabled-checked-border !default;
 
 /// Background color of invalid radio button.
 /// @group radio
-$radio-invalid-bg: $checkbox-invalid-bg !default;
+$radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
 /// Color of invalid radio button.
 /// @group radio
-$radio-invalid-text: $checkbox-invalid-text !default;
+$radio-invalid-text: $kendo-checkbox-invalid-text !default;
 /// Border color of invalid radio button.
 /// @group radio
-$radio-invalid-border: $checkbox-invalid-border !default;
+$radio-invalid-border: $kendo-checkbox-invalid-border !default;
 
 
 // Radio indicator
diff --git a/packages/classic/scss/checkbox/_variables.scss b/packages/classic/scss/checkbox/_variables.scss
index db35227577c..c51fc0a9f1e 100644
--- a/packages/classic/scss/checkbox/_variables.scss
+++ b/packages/classic/scss/checkbox/_variables.scss
@@ -1,142 +1,161 @@
 // Checkbox
 
-$checkbox-size: map-get( $spacing, 4 ) !default;
-$checkbox-radius: map-get( $spacing, 1 ) !default;
 /// Border width of checkbox.
 /// @group checkbox
-$checkbox-border-width: 1px !default;
+$kendo-checkbox-border-width: 1px !default;
+
+// Checkbox sizes
+$kendo-checkbox-sizes: (
+    sm: (
+        size: map-get( $spacing, 3 ),
+        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 3 ) * 3
+    ),
+    md: (
+        size: map-get( $spacing, 4 ),
+        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 4 ) * 3
+    ),
+    lg: (
+        size: map-get( $spacing, 5 ),
+        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 5 ) * 3
+    )
+) !default;
 
 /// Background color of checkbox.
 /// @group checkbox
-$checkbox-bg: $component-bg !default;
+$kendo-checkbox-bg: $component-bg !default;
 /// Color of checkbox.
 /// @group checkbox
-$checkbox-text: null !default;
+$kendo-checkbox-text: null !default;
 /// Border color of checkbox.
 /// @group checkbox
-$checkbox-border: $component-border !default;
+$kendo-checkbox-border: $component-border !default;
 
 /// Background color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-bg: null !default;
+$kendo-checkbox-hover-bg: null !default;
 /// Color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-text: null !default;
+$kendo-checkbox-hover-text: null !default;
 /// Border color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-border: null !default;
+$kendo-checkbox-hover-border: null !default;
 
 /// Background color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-bg: $primary !default;
+$kendo-checkbox-checked-bg: $primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-border: $checkbox-checked-bg !default;
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// Background color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-bg: $checkbox-bg !default;
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
 /// Color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-text: $checkbox-checked-bg !default;
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-bg !default;
 /// Border color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-border: $checkbox-border !default;
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
 
 /// Border color of focused checkbox.
 /// @group checkbox
-$checkbox-focused-border: null !default;
+$kendo-checkbox-focus-border: null !default;
 /// Box shadow of focused checkbox.
 /// @group checkbox
-$checkbox-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
 /// Border color of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-border: null !default;
+$kendo-checkbox-focus-checked-border: null !default;
 /// Box shadow of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
 
 /// Background color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-bg: null !default;
+$kendo-checkbox-disabled-bg: null !default;
 /// Color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-text: null !default;
+$kendo-checkbox-disabled-text: null !default;
 /// Border color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-border: null !default;
+$kendo-checkbox-disabled-border: null !default;
 
 /// Background color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-bg: null !default;
+$kendo-checkbox-disabled-checked-bg: null !default;
 /// Color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-text: null !default;
+$kendo-checkbox-disabled-checked-text: null !default;
 /// Border color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-border: null !default;
+$kendo-checkbox-disabled-checked-border: null !default;
 
 /// Background color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-bg: null !default;
+$kendo-checkbox-invalid-bg: null !default;
 /// Color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-text: $invalid-text !default;
+$kendo-checkbox-invalid-text: $invalid-text !default;
 /// Border color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-border: $invalid-border !default;
+$kendo-checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
 
 /// Type of checkbox indicator.
 /// @group checkbox
-$checkbox-indicator-type: image !default;
+$kendo-checkbox-indicator-type: image !default;
 
 /// Glyph font family of checkbox indicator.
 /// @group checkbox
-$checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-$checkbox-glyph-size: 12px !default;
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 /// Glyph of checkbox indicator.
 /// @group checkbox
-$checkbox-checked-glyph: "\e118" !default;
+$kendo-checkbox-checked-glyph: "\e118" !default;
 /// Glyph of indeterminate checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-glyph: "\e121" !default;
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// Image image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // Checkbox label
-$checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+/// The horizontal margin of the checkbox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-x: 0px !default;
+$kendo-checkbox-list-item-padding-x: 0px !default;
 /// Vertical padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-y: $list-item-padding-y !default;
+$kendo-checkbox-list-item-padding-y: $list-item-padding-y !default;
 
 
 // Checkbox ripple
-$checkbox-ripple-size: $checkbox-size * 3 !default;
+
 /// Background color of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-bg: $checkbox-checked-bg !default;
+$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
 /// Opacity of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-opacity: .25 !default;
+$kendo-checkbox-ripple-opacity: .25 !default;
diff --git a/packages/classic/scss/radio/_variables.scss b/packages/classic/scss/radio/_variables.scss
index 2cd4c5e9009..1e659846fca 100644
--- a/packages/classic/scss/radio/_variables.scss
+++ b/packages/classic/scss/radio/_variables.scss
@@ -10,76 +10,76 @@ $radio-border-width: 1px !default;
 
 /// Background color of radio button.
 /// @group radio
-$radio-bg: $checkbox-bg !default;
+$radio-bg: $kendo-checkbox-bg !default;
 /// Color of radio button.
 /// @group radio
-$radio-text: $checkbox-text !default;
+$radio-text: $kendo-checkbox-text !default;
 /// Border color of radio button.
 /// @group radio
-$radio-border: $checkbox-border !default;
+$radio-border: $kendo-checkbox-border !default;
 
 /// Background color of hovered radio button.
 /// @group radio
-$radio-hovered-bg: $checkbox-hovered-bg !default;
+$radio-hovered-bg: $kendo-checkbox-hover-bg !default;
 /// Color of hovered radio button.
 /// @group radio
-$radio-hovered-text: $checkbox-hovered-text !default;
+$radio-hovered-text: $kendo-checkbox-hover-text !default;
 /// Border color of hovered radio button.
 /// @group radio
-$radio-hovered-border: $checkbox-hovered-border !default;
+$radio-hovered-border: $kendo-checkbox-hover-border !default;
 
 /// Background color of checked radio button.
 /// @group radio
-$radio-checked-bg: $checkbox-checked-bg !default;
+$radio-checked-bg: $kendo-checkbox-checked-bg !default;
 /// Color of checked radio button.
 /// @group radio
-$radio-checked-text: $checkbox-checked-text !default;
+$radio-checked-text: $kendo-checkbox-checked-text !default;
 /// Border color of checked radio button.
 /// @group radio
-$radio-checked-border: $checkbox-checked-border !default;
+$radio-checked-border: $kendo-checkbox-checked-border !default;
 
 /// Border color of focused radio button.
 /// @group radio
-$radio-focused-border: $checkbox-hovered-border !default;
+$radio-focused-border: $kendo-checkbox-focus-border !default;
 /// Box shadow of focused radio button.
 /// @group radio
-$radio-focused-shadow: $checkbox-focused-shadow !default;
+$radio-focused-shadow: $kendo-checkbox-focus-shadow !default;
 /// Border color of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-border: $checkbox-checked-border !default;
+$radio-focused-checked-border: $kendo-checkbox-focus-checked-border !default;
 /// Box shadow of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
+$radio-focused-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
 
 /// Background color of disabled radio button.
 /// @group radio
-$radio-disabled-bg: $checkbox-disabled-bg !default;
+$radio-disabled-bg: $kendo-checkbox-disabled-bg !default;
 /// Color of disabled radio button.
 /// @group radio
-$radio-disabled-text: $checkbox-disabled-text !default;
+$radio-disabled-text: $kendo-checkbox-disabled-text !default;
 /// Border color of disabled radio button.
 /// @group radio
-$radio-disabled-border: $checkbox-disabled-border !default;
+$radio-disabled-border: $kendo-checkbox-disabled-border !default;
 
 /// Background color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-bg: $checkbox-disabled-checked-bg !default;
+$radio-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg !default;
 /// Color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-text: $checkbox-disabled-checked-text !default;
+$radio-disabled-checked-text: $kendo-checkbox-disabled-checked-text !default;
 /// Border color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-border: $checkbox-disabled-checked-border !default;
+$radio-disabled-checked-border: $kendo-checkbox-disabled-checked-border !default;
 
 /// Background color of invalid radio button.
 /// @group radio
-$radio-invalid-bg: $checkbox-invalid-bg !default;
+$radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
 /// Color of invalid radio button.
 /// @group radio
-$radio-invalid-text: $checkbox-invalid-text !default;
+$radio-invalid-text: $kendo-checkbox-invalid-text !default;
 /// Border color of invalid radio button.
 /// @group radio
-$radio-invalid-border: $checkbox-invalid-border !default;
+$radio-invalid-border: $kendo-checkbox-invalid-border !default;
 
 
 // Radio indicator
diff --git a/packages/default/scss/checkbox/_layout.scss b/packages/default/scss/checkbox/_layout.scss
index a0e191a894c..b0ca46b7cd0 100644
--- a/packages/default/scss/checkbox/_layout.scss
+++ b/packages/default/scss/checkbox/_layout.scss
@@ -2,16 +2,12 @@
 
     // Checkbox
     .k-checkbox {
-        @include border-radius( $checkbox-radius );
         margin: 0;
         padding: 0;
-        width: $checkbox-size;
-        height: $checkbox-size;
         line-height: initial;
-        border-width: $checkbox-border-width;
+        border-width: $kendo-checkbox-border-width;
         border-style: solid;
         outline: 0;
-        box-sizing: border-box;
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;
@@ -26,12 +22,11 @@
 
     // Checkbox indicator
     .k-checkbox::before {
-        @if $checkbox-indicator-type == "glyph" {
-            content: $checkbox-checked-glyph;
-            width: $checkbox-glyph-size;
-            height: $checkbox-glyph-size;
-            font-size: $checkbox-glyph-size;
-            font-family: $checkbox-glyph-font-family;
+        @if $kendo-checkbox-indicator-type == "glyph" {
+            content: $kendo-checkbox-checked-glyph;
+            width: 1em;
+            height: 1em;
+            font-family: $kendo-checkbox-glyph-font-family;
             line-height: 1;
             transform: translate(-50%, -50%) scale(0);
             overflow: hidden;
@@ -45,11 +40,11 @@
     // Checked state
     .k-checkbox:checked,
     .k-checkbox.k-checked {
-        @if $checkbox-indicator-type == "image" {
-            background-image: $checkbox-checked-image;
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: $kendo-checkbox-checked-image;
         }
 
-        @if $checkbox-indicator-type == "glyph" {
+        @if $kendo-checkbox-indicator-type == "glyph" {
             &::before {
                 transform: translate(-50%, -50%) scale(1);
             }
@@ -59,16 +54,15 @@
 
     // Indeterminate state
     .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate,
-    .k-checkbox.k-state-indeterminate {
-        @if $checkbox-indicator-type == "image" {
-            background-image: $checkbox-indeterminate-image;
+    .k-checkbox.k-indeterminate {
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: $kendo-checkbox-indeterminate-image;
         }
 
-        @if $checkbox-indicator-type == "glyph" {
+        @if $kendo-checkbox-indicator-type == "glyph" {
             &::before {
-                content: $checkbox-indeterminate-glyph;
-                transform: translate(-50%, -50%) scale(1);
+                content: $kendo-checkbox-indeterminate-glyph;
+                transform: scale(1) translate(-50%, -50%);
             }
         }
     }
@@ -109,7 +103,7 @@
         padding: 0;
         display: inline-flex;
         align-items: flex-start;
-        gap: $checkbox-label-margin-x;
+        gap: $kendo-checkbox-label-margin-x;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
@@ -124,7 +118,7 @@
     .k-checkbox + .k-checkbox-label,
     .k-checkbox-wrap + .k-checkbox-label {
         display: inline;
-        margin-inline-start: $checkbox-label-margin-x;
+        margin-inline-start: $kendo-checkbox-label-margin-x;
     }
 
 
@@ -148,7 +142,7 @@
     }
     .k-checkbox-item,
     .k-checkbox-list-item {
-        padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
+        padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -163,15 +157,11 @@
     .k-checkbox-list.k-list-horizontal {
         display: flex;
         flex-flow: row wrap;
-        gap: $checkbox-list-spacing;
+        gap: $kendo-checkbox-list-spacing;
     }
 
 
     // Ripple
-    .k-checkbox-wrap .k-ripple-blob {
-        width: $checkbox-ripple-size;
-        height: $checkbox-ripple-size;
-    }
     .k-ripple-container {
         .k-checkbox::after {
             content: "";
@@ -179,8 +169,6 @@
             position: absolute;
             left: 50%;
             top: 50%;
-            width: $checkbox-ripple-size;
-            height: $checkbox-ripple-size;
             border-radius: 100%;
             z-index: -1;
             transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
@@ -189,7 +177,7 @@
         }
 
         .k-checkbox:focus,
-        .k-checkbox.k-state-focus {
+        .k-checkbox.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
 
             &::after {
@@ -203,4 +191,27 @@
         }
     }
 
+
+    // Checkbox size
+    @each $size, $size-props in $kendo-checkbox-sizes {
+        $_size: map-get( $size-props, size );
+        $_glyph-size: map-get( $size-props, glyph-size );
+        $_ripple-size: map-get( $size-props, ripple-size );
+
+        .k-checkbox-#{$size} {
+            width: $_size;
+            height: $_size;
+
+            &::before {
+                font-size: $_glyph-size;
+            }
+        }
+        .k-ripple-container {
+            .k-checkbox-#{size}::after {
+                width: $_ripple-size;
+                height: $_ripple-size;
+            }
+        }
+    }
+
 }
diff --git a/packages/default/scss/checkbox/_theme.scss b/packages/default/scss/checkbox/_theme.scss
index c67fce77df8..64c74144924 100644
--- a/packages/default/scss/checkbox/_theme.scss
+++ b/packages/default/scss/checkbox/_theme.scss
@@ -3,40 +3,39 @@
     // Checkbox
     .k-checkbox {
         @include fill(
-            $checkbox-text,
-            $checkbox-bg,
-            $checkbox-border
+            $kendo-checkbox-text,
+            $kendo-checkbox-bg,
+            $kendo-checkbox-border
         );
     }
 
 
     // Hover state
     .k-checkbox:hover,
-    .k-checkbox.k-state-hover {
+    .k-checkbox.k-hover {
         @include fill(
-            $checkbox-hovered-text,
-            $checkbox-hovered-bg,
-            $checkbox-hovered-border
+            $kendo-checkbox-hover-text,
+            $kendo-checkbox-hover-bg,
+            $kendo-checkbox-hover-border
         );
     }
 
 
     // Focus state
     .k-checkbox:focus,
-    .k-checkbox.k-state-focus {
-        @include fill( $border: $checkbox-focused-border );
-        @include box-shadow( $checkbox-focused-shadow );
+    .k-checkbox.k-focus {
+        @include fill( $border: $kendo-checkbox-focus-border );
+        @include box-shadow( $kendo-checkbox-focus-shadow );
     }
 
 
     // Indeterminate
     .k-checkbox:indeterminate,
-    .k-checkbox.k-state-indeterminate,
     .k-checkbox.k-indeterminate {
         @include fill(
-            $checkbox-indeterminate-text,
-            $checkbox-indeterminate-bg,
-            $checkbox-indeterminate-border
+            $kendo-checkbox-indeterminate-text,
+            $kendo-checkbox-indeterminate-bg,
+            $kendo-checkbox-indeterminate-border
         );
     }
 
@@ -45,15 +44,15 @@
     .k-checkbox:checked,
     .k-checkbox.k-checked {
         @include fill(
-            $checkbox-checked-text,
-            $checkbox-checked-bg,
-            $checkbox-checked-border
+            $kendo-checkbox-checked-text,
+            $kendo-checkbox-checked-bg,
+            $kendo-checkbox-checked-border
         );
     }
     .k-checkbox:checked:focus,
-    .k-checkbox.k-checked.k-state-focus {
-        @include fill( $border: $checkbox-focused-checked-border );
-        @include box-shadow( $checkbox-focused-checked-shadow );
+    .k-checkbox.k-checked.k-focus {
+        @include fill( $border: $kendo-checkbox-focus-checked-border );
+        @include box-shadow( $kendo-checkbox-focus-checked-shadow );
     }
 
 
@@ -61,48 +60,41 @@
     .k-checkbox:disabled,
     .k-checkbox.k-disabled {
         @include fill(
-            $checkbox-disabled-text,
-            $checkbox-disabled-bg,
-            $checkbox-disabled-border
+            $kendo-checkbox-disabled-text,
+            $kendo-checkbox-disabled-bg,
+            $kendo-checkbox-disabled-border
         );
     }
     .k-checkbox:checked:disabled,
     .k-checkbox:indeterminate:disabled,
-    .k-checkbox.k-state-indeterminate:disabled,
     .k-checkbox.k-checked.k-disabled,
     .k-checkbox.k-indeterminate.k-disabled {
         @include fill(
-            $checkbox-disabled-checked-text,
-            $checkbox-disabled-checked-bg,
-            $checkbox-disabled-checked-border
+            $kendo-checkbox-disabled-checked-text,
+            $kendo-checkbox-disabled-checked-bg,
+            $kendo-checkbox-disabled-checked-border
         );
     }
 
 
     // Invalid
-    .k-checkbox.k-invalid,
-    .k-checkbox.k-state-invalid,
-    .k-checkbox.ng-invalid.ng-touched,
-    .k-checkbox.ng-invalid.ng-dirty {
-        @include fill( $border: $checkbox-invalid-border );
+    .k-checkbox.k-invalid {
+        @include fill( $border: $kendo-checkbox-invalid-border );
     }
-    .k-checkbox.k-invalid + .k-checkbox-label,
-    .k-checkbox.k-state-invalid + .k-checkbox-label,
-    .k-checkbox.ng-invalid.ng-touched + .k-checkbox-label,
-    .k-checkbox.ng-invalid.ng-dirty + .k-checkbox-label {
-        @include fill( $color: $checkbox-invalid-text );
+    .k-checkbox.k-invalid + .k-checkbox-label {
+        @include fill( $color: $kendo-checkbox-invalid-text );
     }
 
 
     // Ripple
     .k-checkbox-wrap .k-ripple-blob {
-        color: $checkbox-ripple-bg;
-        opacity: $checkbox-ripple-opacity;
+        color: $kendo-checkbox-ripple-bg;
+        opacity: $kendo-checkbox-ripple-opacity;
     }
     .k-ripple-container {
         .k-checkbox::after {
-            background: $checkbox-ripple-bg;
-            opacity: $checkbox-ripple-opacity;
+            background: $kendo-checkbox-ripple-bg;
+            opacity: $kendo-checkbox-ripple-opacity;
         }
     }
 
diff --git a/packages/default/scss/checkbox/_variables.scss b/packages/default/scss/checkbox/_variables.scss
index ecee0b8b703..c51fc0a9f1e 100644
--- a/packages/default/scss/checkbox/_variables.scss
+++ b/packages/default/scss/checkbox/_variables.scss
@@ -1,142 +1,161 @@
 // Checkbox
 
-$checkbox-size: map-get( $spacing, 4 ) !default;
-$checkbox-radius: map-get( $spacing, thin ) !default;
 /// Border width of checkbox.
 /// @group checkbox
-$checkbox-border-width: 1px !default;
+$kendo-checkbox-border-width: 1px !default;
+
+// Checkbox sizes
+$kendo-checkbox-sizes: (
+    sm: (
+        size: map-get( $spacing, 3 ),
+        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 3 ) * 3
+    ),
+    md: (
+        size: map-get( $spacing, 4 ),
+        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 4 ) * 3
+    ),
+    lg: (
+        size: map-get( $spacing, 5 ),
+        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 5 ) * 3
+    )
+) !default;
 
 /// Background color of checkbox.
 /// @group checkbox
-$checkbox-bg: $component-bg !default;
+$kendo-checkbox-bg: $component-bg !default;
 /// Color of checkbox.
 /// @group checkbox
-$checkbox-text: null !default;
+$kendo-checkbox-text: null !default;
 /// Border color of checkbox.
 /// @group checkbox
-$checkbox-border: $component-border !default;
+$kendo-checkbox-border: $component-border !default;
 
 /// Background color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-bg: null !default;
+$kendo-checkbox-hover-bg: null !default;
 /// Color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-text: null !default;
+$kendo-checkbox-hover-text: null !default;
 /// Border color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-border: null !default;
+$kendo-checkbox-hover-border: null !default;
 
 /// Background color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-bg: $primary !default;
+$kendo-checkbox-checked-bg: $primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-border: $checkbox-checked-bg !default;
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// Background color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-bg: $checkbox-bg !default;
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
 /// Color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-text: $checkbox-checked-bg !default;
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-bg !default;
 /// Border color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-border: $checkbox-border !default;
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
 
 /// Border color of focused checkbox.
 /// @group checkbox
-$checkbox-focused-border: null !default;
+$kendo-checkbox-focus-border: null !default;
 /// Box shadow of focused checkbox.
 /// @group checkbox
-$checkbox-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
 /// Border color of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-border: null !default;
+$kendo-checkbox-focus-checked-border: null !default;
 /// Box shadow of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
 
 /// Background color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-bg: null !default;
+$kendo-checkbox-disabled-bg: null !default;
 /// Color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-text: null !default;
+$kendo-checkbox-disabled-text: null !default;
 /// Border color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-border: null !default;
+$kendo-checkbox-disabled-border: null !default;
 
 /// Background color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-bg: null !default;
+$kendo-checkbox-disabled-checked-bg: null !default;
 /// Color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-text: null !default;
+$kendo-checkbox-disabled-checked-text: null !default;
 /// Border color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-border: null !default;
+$kendo-checkbox-disabled-checked-border: null !default;
 
 /// Background color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-bg: null !default;
+$kendo-checkbox-invalid-bg: null !default;
 /// Color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-text: $invalid-text !default;
+$kendo-checkbox-invalid-text: $invalid-text !default;
 /// Border color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-border: $invalid-border !default;
+$kendo-checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
 
 /// Type of checkbox indicator.
 /// @group checkbox
-$checkbox-indicator-type: image !default;
+$kendo-checkbox-indicator-type: image !default;
 
 /// Glyph font family of checkbox indicator.
 /// @group checkbox
-$checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-$checkbox-glyph-size: 12px !default;
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 /// Glyph of checkbox indicator.
 /// @group checkbox
-$checkbox-checked-glyph: "\e118" !default;
+$kendo-checkbox-checked-glyph: "\e118" !default;
 /// Glyph of indeterminate checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-glyph: "\e121" !default;
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// Image image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // Checkbox label
-$checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+/// The horizontal margin of the checkbox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-x: 0px !default;
+$kendo-checkbox-list-item-padding-x: 0px !default;
 /// Vertical padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-y: $list-item-padding-y !default;
+$kendo-checkbox-list-item-padding-y: $list-item-padding-y !default;
 
 
 // Checkbox ripple
-$checkbox-ripple-size: $checkbox-size * 3 !default;
+
 /// Background color of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-bg: $checkbox-checked-bg !default;
+$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
 /// Opacity of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-opacity: .25 !default;
+$kendo-checkbox-ripple-opacity: .25 !default;
diff --git a/packages/default/scss/radio/_theme.scss b/packages/default/scss/radio/_theme.scss
index 39f755bff29..b46ce275ae4 100644
--- a/packages/default/scss/radio/_theme.scss
+++ b/packages/default/scss/radio/_theme.scss
@@ -82,8 +82,8 @@
     // Ripple
     .k-ripple-container {
         .k-radio::after {
-            background: $checkbox-checked-bg;
-            opacity: $checkbox-ripple-opacity;
+            background: $radio-checked-bg;
+            opacity: $radio-ripple-opacity;
         }
     }
 
diff --git a/packages/default/scss/radio/_variables.scss b/packages/default/scss/radio/_variables.scss
index d67389019af..40046b348fe 100644
--- a/packages/default/scss/radio/_variables.scss
+++ b/packages/default/scss/radio/_variables.scss
@@ -10,76 +10,76 @@ $radio-border-width: 1px !default;
 
 /// Background color of radio button.
 /// @group radio
-$radio-bg: $checkbox-bg !default;
+$radio-bg: $kendo-checkbox-bg !default;
 /// Color of radio button.
 /// @group radio
-$radio-text: $checkbox-text !default;
+$radio-text: $kendo-checkbox-text !default;
 /// Border color of radio button.
 /// @group radio
-$radio-border: $checkbox-border !default;
+$radio-border: $kendo-checkbox-border !default;
 
 /// Background color of hovered radio button.
 /// @group radio
-$radio-hovered-bg: $checkbox-hovered-bg !default;
+$radio-hovered-bg: $kendo-checkbox-hover-bg !default;
 /// Color of hovered radio button.
 /// @group radio
-$radio-hovered-text: $checkbox-hovered-text !default;
+$radio-hovered-text: $kendo-checkbox-hover-text !default;
 /// Border color of hovered radio button.
 /// @group radio
-$radio-hovered-border: $checkbox-hovered-border !default;
+$radio-hovered-border: $kendo-checkbox-hover-border !default;
 
 /// Background color of checked radio button.
 /// @group radio
-$radio-checked-bg: $checkbox-checked-bg !default;
+$radio-checked-bg: $kendo-checkbox-checked-bg !default;
 /// Color of checked radio button.
 /// @group radio
-$radio-checked-text: $checkbox-checked-text !default;
+$radio-checked-text: $kendo-checkbox-checked-text !default;
 /// Border color of checked radio button.
 /// @group radio
-$radio-checked-border: $checkbox-checked-border !default;
+$radio-checked-border: $kendo-checkbox-checked-border !default;
 
 /// Border color of focused radio button.
 /// @group radio
-$radio-focused-border: $checkbox-hovered-border !default;
+$radio-focused-border: $kendo-checkbox-focus-border !default;
 /// Box shadow of focused radio button.
 /// @group radio
-$radio-focused-shadow: $checkbox-focused-shadow !default;
+$radio-focused-shadow: $kendo-checkbox-focus-shadow !default;
 /// Border color of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-border: $checkbox-checked-border !default;
+$radio-focused-checked-border: $kendo-checkbox-focus-checked-border !default;
 /// Box shadow of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
+$radio-focused-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
 
 /// Background color of disabled radio button.
 /// @group radio
-$radio-disabled-bg: $checkbox-disabled-bg !default;
+$radio-disabled-bg: $kendo-checkbox-disabled-bg !default;
 /// Color of disabled radio button.
 /// @group radio
-$radio-disabled-text: $checkbox-disabled-text !default;
+$radio-disabled-text: $kendo-checkbox-disabled-text !default;
 /// Border color of disabled radio button.
 /// @group radio
-$radio-disabled-border: $checkbox-disabled-border !default;
+$radio-disabled-border: $kendo-checkbox-disabled-border !default;
 
 /// Background color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-bg: $checkbox-disabled-checked-bg !default;
+$radio-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg !default;
 /// Color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-text: $checkbox-disabled-checked-text !default;
+$radio-disabled-checked-text: $kendo-checkbox-disabled-checked-text !default;
 /// Border color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-border: $checkbox-disabled-checked-border !default;
+$radio-disabled-checked-border: $kendo-checkbox-disabled-checked-border !default;
 
 /// Background color of invalid radio button.
 /// @group radio
-$radio-invalid-bg: $checkbox-invalid-bg !default;
+$radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
 /// Color of invalid radio button.
 /// @group radio
-$radio-invalid-text: $checkbox-invalid-text !default;
+$radio-invalid-text: $kendo-checkbox-invalid-text !default;
 /// Border color of invalid radio button.
 /// @group radio
-$radio-invalid-border: $checkbox-invalid-border !default;
+$radio-invalid-border: $kendo-checkbox-invalid-border !default;
 
 // Radio indicator
 
diff --git a/packages/material/scss/checkbox/_variables.scss b/packages/material/scss/checkbox/_variables.scss
index d6e3fa31dca..2afd8adafbd 100644
--- a/packages/material/scss/checkbox/_variables.scss
+++ b/packages/material/scss/checkbox/_variables.scss
@@ -1,143 +1,163 @@
 // Checkbox
 
-$checkbox-size: map-get( $spacing, 4 ) !default;
-$checkbox-radius: map-get( $spacing, thin ) !default;
 /// Border width of checkbox.
 /// @group checkbox
-$checkbox-border-width: 2px !default;
+$kendo-checkbox-border-width: 2px !default;
+
+// Checkbox sizes
+$kendo-checkbox-sizes: (
+    sm: (
+        size: map-get( $spacing, 3 ),
+        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 3 ) * 3
+    ),
+    md: (
+        size: map-get( $spacing, 4 ),
+        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 4 ) * 3
+    ),
+    lg: (
+        size: map-get( $spacing, 5 ),
+        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 5 ) * 3
+    )
+) !default;
 
 /// Background color of checkbox.
 /// @group checkbox
-$checkbox-bg: null !default;
+$kendo-checkbox-bg: null !default;
 /// Color of checkbox.
 /// @group checkbox
-$checkbox-text: null !default;
+$kendo-checkbox-text: null !default;
 /// Border color of checkbox.
 /// @group checkbox
-$checkbox-border: rgba( if( $dark-theme, $white, $black ), .54 ) !default;
+$kendo-checkbox-border: rgba( if( $dark-theme, $white, $black ), .54 ) !default;
 
 /// Background color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-bg: null !default;
+$kendo-checkbox-hover-bg: null !default;
 /// Color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-text: null !default;
+$kendo-checkbox-hover-text: null !default;
 /// Border color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-border: null !default;
+$kendo-checkbox-hover-border: null !default;
 
 /// Background color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-bg: $primary !default;
+$kendo-checkbox-checked-bg: $primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-border: $checkbox-checked-bg !default;
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// Background color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-bg: $checkbox-checked-bg !default;
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
 /// Color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-text: $checkbox-checked-text !default;
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
 /// Border color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-border: $checkbox-checked-border !default;
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
 /// Border color of focused checkbox.
 /// @group checkbox
-$checkbox-focused-border: null !default;
+$kendo-checkbox-focus-border: null !default;
 /// Box shadow of focused checkbox.
 /// @group checkbox
-$checkbox-focused-shadow: null !default;
+$kendo-checkbox-focus-shadow: null !default;
 /// Border color of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-border: null !default;
+$kendo-checkbox-focus-checked-border: null !default;
 /// Box shadow of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-shadow: null !default;
+$kendo-checkbox-focus-checked-shadow: null !default;
 
 /// Background color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-bg: null !default;
+$kendo-checkbox-disabled-bg: null !default;
 /// Color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-text: null !default;
+$kendo-checkbox-disabled-text: null !default;
 /// Border color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
+$kendo-checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
 
 
 /// Background color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-bg: $checkbox-disabled-border !default;
+$kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
 /// Color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-text: contrast-wcag( $checkbox-disabled-checked-bg ) !default;
+$kendo-checkbox-disabled-checked-text: contrast-wcag( $kendo-checkbox-disabled-checked-bg ) !default;
 /// Border color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-border: $checkbox-disabled-checked-bg !default;
+$kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
 
 /// Background color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-bg: null !default;
+$kendo-checkbox-invalid-bg: null !default;
 /// Color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-text: $invalid-text !default;
+$kendo-checkbox-invalid-text: $invalid-text !default;
 /// Border color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-border: $invalid-border !default;
+$kendo-checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
 
 /// Type of checkbox indicator.
 /// @group checkbox
-$checkbox-indicator-type: image !default;
+$kendo-checkbox-indicator-type: image !default;
 
 /// Glyph font family of checkbox indicator.
 /// @group checkbox
-$checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-$checkbox-glyph-size: 10px !default;
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
+$kendo-checkbox-glyph-size: 10px !default;
 /// Glyph of checkbox indicator.
 /// @group checkbox
-$checkbox-checked-glyph: "\e118" !default;
+$kendo-checkbox-checked-glyph: "\e118" !default;
 /// Glyph of indeterminate checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-glyph: "\e121" !default;
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
 
 
 // Checkbox label
-$checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+/// The horizontal margin of the checkbox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-x: 0px !default;
+$kendo-checkbox-list-item-padding-x: 0px !default;
 /// Vertical padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-y: $list-item-padding-y !default;
+$kendo-checkbox-list-item-padding-y: $list-item-padding-y !default;
 
 
 // Checkbox ripple
-$checkbox-ripple-size: $checkbox-size * 3 !default;
+
 /// Background color of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-bg: $primary !default;
+$kendo-checkbox-ripple-bg: $primary !default;
 /// Opacity of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-opacity: .2 !default;
+$kendo-checkbox-ripple-opacity: .2 !default;
diff --git a/packages/material/scss/radio/_variables.scss b/packages/material/scss/radio/_variables.scss
index 502bc8466d8..36bb306a3c9 100644
--- a/packages/material/scss/radio/_variables.scss
+++ b/packages/material/scss/radio/_variables.scss
@@ -10,13 +10,13 @@ $radio-border-width: 2px !default;
 
 /// Background color of radio button.
 /// @group radio
-$radio-bg: $checkbox-bg !default;
+$radio-bg: $kendo-checkbox-bg !default;
 /// Color of radio button.
 /// @group radio
-$radio-text: $checkbox-text !default;
+$radio-text: $kendo-checkbox-text !default;
 /// Border color of radio button.
 /// @group radio
-$radio-border: $checkbox-border !default;
+$radio-border: $kendo-checkbox-border !default;
 
 /// Background color of hovered radio button.
 /// @group radio
@@ -40,16 +40,16 @@ $radio-checked-border: $radio-checked-text !default;
 
 /// Border color of focused radio button.
 /// @group radio
-$radio-focused-border: $checkbox-hovered-border !default;
+$radio-focused-border: $kendo-checkbox-focus-border !default;
 /// Box shadow of focused radio button.
 /// @group radio
-$radio-focused-shadow: $checkbox-focused-shadow !default;
+$radio-focused-shadow: $kendo-checkbox-focus-shadow !default;
 /// Border color of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-border: $checkbox-checked-border !default;
+$radio-focused-checked-border: $kendo-checkbox-focus-checked-border !default;
 /// Box shadow of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
+$radio-focused-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
 
 /// Background color of disabled radio button.
 /// @group radio
@@ -59,7 +59,7 @@ $radio-disabled-bg: null !default;
 $radio-disabled-text: null !default;
 /// Border color of disabled radio button.
 /// @group radio
-$radio-disabled-border: $checkbox-disabled-border !default;
+$radio-disabled-border: $kendo-checkbox-disabled-border !default;
 
 /// Background color of disabled and checked radio button.
 /// @group radio
@@ -73,13 +73,13 @@ $radio-disabled-checked-border: $radio-disabled-border !default;
 
 /// Background color of invalid radio button.
 /// @group radio
-$radio-invalid-bg: $checkbox-invalid-bg !default;
+$radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
 /// Color of invalid radio button.
 /// @group radio
-$radio-invalid-text: $checkbox-invalid-text !default;
+$radio-invalid-text: $kendo-checkbox-invalid-text !default;
 /// Border color of invalid radio button.
 /// @group radio
-$radio-invalid-border: $checkbox-invalid-border !default;
+$radio-invalid-border: $kendo-checkbox-invalid-border !default;
 
 
 // Radio indicator