diff --git a/src/base/single/input/checkbox/checkbox.image.js b/src/base/single/input/checkbox/checkbox.image.js
index 0400f6530..04a6c5589 100644
--- a/src/base/single/input/checkbox/checkbox.image.js
+++ b/src/base/single/input/checkbox/checkbox.image.js
@@ -1,13 +1,21 @@
 /**
  * guy
- * @extends BI.Single
+ * @extends Single
  * @type {*|void|Object}
  */
-BI.ImageCheckbox = BI.inherit(BI.IconButton, {
-    _defaultConfig: function () {
-        var conf = BI.ImageCheckbox.superclass._defaultConfig.apply(this, arguments);
+import { shortcut, extend } from "../../../../core";
+import { IconButton } from "../../button";
 
-        return BI.extend(conf, {
+@shortcut()
+export class ImageCheckbox extends IconButton {
+    static xtype = "bi.image_checkbox";
+
+    static EVENT_CHANGE = IconButton.EVENT_CHANGE;
+    
+    _defaultConfig() {
+        const conf = super._defaultConfig(arguments);
+
+        return extend(conf, {
             baseCls: (conf.baseCls || "") + " bi-image-checkbox check-box-icon",
             selected: false,
             handler: BI.emptyFn,
@@ -16,8 +24,5 @@ BI.ImageCheckbox = BI.inherit(BI.IconButton, {
             iconWidth: 16,
             iconHeight: 16,
         });
-    },
-});
-BI.ImageCheckbox.EVENT_CHANGE = BI.IconButton.EVENT_CHANGE;
-
-BI.shortcut("bi.image_checkbox", BI.ImageCheckbox);
+    }
+}
diff --git a/src/base/single/input/checkbox/checkbox.js b/src/base/single/input/checkbox/checkbox.js
index b25d743e8..ed5ef46f7 100644
--- a/src/base/single/input/checkbox/checkbox.js
+++ b/src/base/single/input/checkbox/checkbox.js
@@ -1,11 +1,18 @@
 /**
  * guy
- * @extends BI.Single
+ * @extends Single
  * @type {*|void|Object}
  */
-BI.Checkbox = BI.inherit(BI.BasicButton, {
+import { shortcut } from "../../../../core";
+import { BasicButton } from "../../button";
 
-    props: {
+@shortcut()
+export class Checkbox extends BasicButton {
+    static xtype = "bi.checkbox";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    props = {
         baseCls: "bi-checkbox",
         selected: false,
         handler: BI.emptyFn,
@@ -13,50 +20,47 @@ BI.Checkbox = BI.inherit(BI.BasicButton, {
         height: 14,
         iconWidth: 14,
         iconHeight: 14,
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const { iconWidth, iconHeight } = this.options;
 
         return {
             type: "bi.center_adapt",
             items: [{
                 type: "bi.default",
-                ref: function (_ref) {
-                    self.checkbox = _ref;
+                ref: (_ref) => {
+                    this.checkbox = _ref;
                 },
                 cls: "checkbox-content",
-                width: o.iconWidth,
-                height: o.iconHeight,
+                width: iconWidth,
+                height: iconHeight,
             }],
         };
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.Checkbox.superclass._setEnable.apply(this, arguments);
+    _setEnable(enable) {
+        super._setEnable(enable);
         if (enable === true) {
             this.checkbox.element.removeClass("base-disabled disabled");
         } else {
             this.checkbox.element.addClass("base-disabled disabled");
         }
-    },
+    }
 
-    doClick: function () {
-        BI.Checkbox.superclass.doClick.apply(this, arguments);
+    doClick() {
+        super.doClick(arguments);
         if (this.isValid()) {
-            this.fireEvent(BI.Checkbox.EVENT_CHANGE);
+            this.fireEvent(Checkbox.EVENT_CHANGE);
         }
-    },
+    }
 
-    setSelected: function (b) {
-        BI.Checkbox.superclass.setSelected.apply(this, arguments);
+    setSelected(b) {
+        super.setSelected(b);
         if (b) {
             this.checkbox.element.addClass("bi-high-light-background");
         } else {
             this.checkbox.element.removeClass("bi-high-light-background");
         }
-    },
-});
-BI.Checkbox.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.shortcut("bi.checkbox", BI.Checkbox);
+    }
+}
diff --git a/src/base/single/input/index.js b/src/base/single/input/index.js
index 4cd03bad2..35a8f9b60 100644
--- a/src/base/single/input/index.js
+++ b/src/base/single/input/index.js
@@ -1,2 +1,6 @@
 export { Input } from "./input";
-export { File } from "./file";
\ No newline at end of file
+export { File } from "./file";
+export { Checkbox } from "./checkbox/checkbox";
+export { ImageCheckbox } from "./checkbox/checkbox.image";
+export { Radio } from "./radio/radio";
+export { ImageRadio } from "./radio/radio.image";
\ No newline at end of file
diff --git a/src/base/single/input/radio/radio.image.js b/src/base/single/input/radio/radio.image.js
index f9d870f63..513b1feff 100644
--- a/src/base/single/input/radio/radio.image.js
+++ b/src/base/single/input/radio/radio.image.js
@@ -1,13 +1,21 @@
 /**
  * guy
- * @extends BI.Single
+ * @extends Single
  * @type {*|void|Object}
  */
-BI.ImageRadio = BI.inherit(BI.IconButton, {
-    _defaultConfig: function () {
-        var conf = BI.ImageRadio.superclass._defaultConfig.apply(this, arguments);
+import { shortcut, extend } from "../../../../core";
+import { IconButton } from "../../button";
 
-        return BI.extend(conf, {
+@shortcut()
+export class ImageRadio extends IconButton {
+    static xtype = "bi.image_radio";
+
+    static EVENT_CHANGE = IconButton.EVENT_CHANGE;
+    
+    _defaultConfig() {
+        const conf = super._defaultConfig(arguments);
+
+        return extend(conf, {
             baseCls: (conf.baseCls || "") + " bi-radio radio-icon",
             selected: false,
             handler: BI.emptyFn,
@@ -16,15 +24,12 @@ BI.ImageRadio = BI.inherit(BI.IconButton, {
             iconWidth: 16,
             iconHeight: 16,
         });
-    },
+    }
 
-    doClick: function () {
-        BI.ImageRadio.superclass.doClick.apply(this, arguments);
+    doClick() {
+        super.doClick(arguments);
         if (this.isValid()) {
-            this.fireEvent(BI.ImageRadio.EVENT_CHANGE);
+            this.fireEvent(ImageRadio.EVENT_CHANGE);
         }
-    },
-});
-BI.ImageRadio.EVENT_CHANGE = BI.IconButton.EVENT_CHANGE;
-
-BI.shortcut("bi.image_radio", BI.ImageRadio);
+    }
+}
diff --git a/src/base/single/input/radio/radio.js b/src/base/single/input/radio/radio.js
index f84cf4038..612cd98d8 100644
--- a/src/base/single/input/radio/radio.js
+++ b/src/base/single/input/radio/radio.js
@@ -1,11 +1,17 @@
 /**
  * guy
- * @extends BI.Single
+ * @extends Single
  * @type {*|void|Object}
  */
-BI.Radio = BI.inherit(BI.BasicButton, {
+import { shortcut } from "../../../../core";
+import { BasicButton } from "../../button";
 
-    props: {
+@shortcut()
+export class Radio extends BasicButton {
+    static xtype = "bi.radio";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    props = {
         baseCls: "bi-radio",
         selected: false,
         handler: BI.emptyFn,
@@ -13,50 +19,47 @@ BI.Radio = BI.inherit(BI.BasicButton, {
         height: 16,
         iconWidth: 16,
         iconHeight: 16
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const { iconWidth, iconHeight } = this.options;
 
         return {
             type: "bi.center_adapt",
             items: [{
                 type: "bi.layout",
                 cls: "radio-content",
-                ref: function (_ref) {
-                    self.radio = _ref;
+                ref: (_ref) => {
+                    this.radio = _ref;
                 },
-                width: o.iconWidth,
-                height: o.iconHeight,
+                width: iconWidth,
+                height: iconHeight,
             }],
         };
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.Radio.superclass._setEnable.apply(this, arguments);
+    _setEnable(enable) {
+        super._setEnable(enable);
         if (enable === true) {
             this.radio.element.removeClass("base-disabled disabled");
         } else {
             this.radio.element.addClass("base-disabled disabled");
         }
-    },
+    }
 
-    doClick: function () {
-        BI.Radio.superclass.doClick.apply(this, arguments);
+    doClick() {
+        super.doClick(arguments);
         if (this.isValid()) {
-            this.fireEvent(BI.Radio.EVENT_CHANGE);
+            this.fireEvent(Radio.EVENT_CHANGE);
         }
-    },
+    }
 
-    setSelected: function (b) {
-        BI.Radio.superclass.setSelected.apply(this, arguments);
+    setSelected(b) {
+        super.setSelected(b);
         if (b) {
             this.radio.element.addClass("bi-high-light-background");
         } else {
             this.radio.element.removeClass("bi-high-light-background");
         }
-    },
-});
-BI.Radio.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.shortcut("bi.radio", BI.Radio);
+    }
+}