diff --git a/packages/html/src/checkbox/README.md b/packages/html/src/checkbox/README.md
index e69de29bb2d..5f3a8aee8eb 100644
--- a/packages/html/src/checkbox/README.md
+++ b/packages/html/src/checkbox/README.md
@@ -0,0 +1,22 @@
+```html
+<!-- default rendering -->
+<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md" />
+
+<!-- canonical rendering -->
+<input type="checkbox"
+    class="
+        k-checkbox
+        k-checkbox-${size}
+        k-rounded-${rounded}
+
+        ${checked && 'k-checked'}
+        ${indeterminate && 'k-indeterminate'}
+
+        ${valid && 'k-valid'}
+        ${invalid && 'k-invalid'}
+        ${required && 'k-required'}
+        ${disabled && 'k-disabled'}
+    "
+    disabled={disabled}
+/>
+```
diff --git a/packages/html/src/checkbox/checkbox.jsx b/packages/html/src/checkbox/checkbox.jsx
index 061fe4a4c04..9851b1a13ef 100644
--- a/packages/html/src/checkbox/checkbox.jsx
+++ b/packages/html/src/checkbox/checkbox.jsx
@@ -58,20 +58,21 @@ function CheckboxStatic(props) {
         }
     ];
 
-    let legacyClasses = [
-        ownClassName,
-        'k-checkbox',
-        {
-            'k-state-hover': hover === true,
-            'k-state-focus': focus === true,
-            'k-state-invalid': invalid === true,
-            'k-state-disabled': disabled === true,
-            'k-checked': checked === true,
-            'k-state-indeterminate': isIndeterminate,
-        }
-    ];
-
     if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-checkbox',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-invalid': invalid === true,
+                'k-state-disabled': disabled === true,
+                'k-checked': checked === true,
+                'k-state-indeterminate': isIndeterminate,
+            }
+        ];
+
         return (
             <input type="checkbox" className={legacyClasses} {...ariaAttr} {...htmlAttributes} />
         );
@@ -86,10 +87,15 @@ CheckboxStatic.defaultProps = {
     ...globalDefaultProps,
 
     id: '',
-    name: ''
+    name: '',
+
+    size: 'medium',
+    rounded: 'medium'
 };
 
 CheckboxStatic.propTypes = {
+    className: typeof '',
+
     id: typeof '',
     name: typeof '',
     value: typeof '',
@@ -110,7 +116,6 @@ CheckboxStatic.propTypes = {
     aria: typeof false,
     legacy: typeof false,
 
-    className: typeof '',
     htmlAttributes: typeof []
 };
 
diff --git a/packages/html/src/radio/README.md b/packages/html/src/radio/README.md
index e69de29bb2d..642ccf8727a 100644
--- a/packages/html/src/radio/README.md
+++ b/packages/html/src/radio/README.md
@@ -0,0 +1,21 @@
+```html
+<!-- default rendering -->
+<input type="radio" class="k-radio k-radio-md k-rounded-md" />
+
+<!-- canonical rendering -->
+<input type="radio"
+    class="
+        k-radio
+        k-radio-${size}
+        k-rounded-${rounded}
+
+        ${checked && 'k-checked'}
+
+        ${valid && 'k-valid'}
+        ${invalid && 'k-invalid'}
+        ${required && 'k-required'}
+        ${disabled && 'k-disabled'}
+    "
+    disabled={disabled}
+/>
+```
diff --git a/packages/html/src/radio/radio.jsx b/packages/html/src/radio/radio.jsx
index ccc13d2c426..e3fcff987b1 100644
--- a/packages/html/src/radio/radio.jsx
+++ b/packages/html/src/radio/radio.jsx
@@ -48,19 +48,20 @@ function RadioStatic(props) {
         }
     ];
 
-    let legacyClasses = [
-        ownClassName,
-        'k-radio',
-        {
-            'k-state-hover': hover === true,
-            'k-state-focus': focus === true,
-            'k-state-invalid': invalid === true,
-            'k-state-disabled': disabled === true,
-            'k-state-checked': checked === true,
-        }
-    ];
-
     if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-radio',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-invalid': invalid === true,
+                'k-state-disabled': disabled === true,
+                'k-state-checked': checked === true,
+            }
+        ];
+
         return <input type="radio" className={legacyClasses} {...ariaAttr} {...htmlAttributes}/>;
     }
 
@@ -71,10 +72,14 @@ RadioStatic.defaultProps = {
     ...globalDefaultProps,
 
     id: '',
-    name: ''
+    name: '',
+
+    size: 'medium'
 };
 
 RadioStatic.propTypes = {
+    className: typeof '',
+
     id: typeof '',
     name: typeof '',
     value: typeof '',
@@ -92,7 +97,6 @@ RadioStatic.propTypes = {
     aria: typeof false,
     legacy: typeof false,
 
-    className: typeof '',
     htmlAttributes: typeof []
 };