diff --git a/demo/js/widget/basewidget/demo.items.js b/demo/js/widget/basewidget/demo.items.js
index 14a1115fd8..0562519b3d 100644
--- a/demo/js/widget/basewidget/demo.items.js
+++ b/demo/js/widget/basewidget/demo.items.js
@@ -27,6 +27,9 @@ Demo.Items = BI.inherit(BI.Widget, {
             }, {
                 type: "bi.multi_select_item",
                 text: "复选项"
+            }, {
+                type: "bi.switch",
+                selected: true
             }],
             hgap: 300
         };
diff --git a/dist/base.css b/dist/base.css
index 9bd4f03138..f99995f9fc 100644
--- a/dist/base.css
+++ b/dist/base.css
@@ -1120,6 +1120,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
   color: #3685f2;
 }
+.bi-switch {
+  -webkit-border-radius: 40px 40px 40px 40px;
+  -moz-border-radius: 40px 40px 40px 40px;
+  border-radius: 40px 40px 40px 40px;
+  background-color: #d4dadd;
+}
+.bi-switch:active,
+.bi-switch.active {
+  background-color: #3f8ce8;
+}
+.bi-switch .circle-button {
+  -webkit-border-radius: 9px 9px 9px 9px;
+  -moz-border-radius: 9px 9px 9px 9px;
+  border-radius: 9px 9px 9px 9px;
+}
 .bi-code-editor .param {
   color: #ffffff;
   padding: 0 5px;
diff --git a/dist/bundle.css b/dist/bundle.css
index c6e6a32fd4..801c729f2f 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -3167,6 +3167,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
   color: #3685f2;
 }
+.bi-switch {
+  -webkit-border-radius: 40px 40px 40px 40px;
+  -moz-border-radius: 40px 40px 40px 40px;
+  border-radius: 40px 40px 40px 40px;
+  background-color: #d4dadd;
+}
+.bi-switch:active,
+.bi-switch.active {
+  background-color: #3f8ce8;
+}
+.bi-switch .circle-button {
+  -webkit-border-radius: 9px 9px 9px 9px;
+  -moz-border-radius: 9px 9px 9px 9px;
+  border-radius: 9px 9px 9px 9px;
+}
 .bi-code-editor .param {
   color: #ffffff;
   padding: 0 5px;
diff --git a/dist/bundle.js b/dist/bundle.js
index 95a95f7610..5ec791bdb5 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -63547,6 +63547,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 });
 
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
+ * Created by Windy on 2018/2/1.
+ */
+/**
+ * guy
+ * 复选框item
+ * @type {*|void|Object}
+ */
+BI.Switch = BI.inherit(BI.BasicButton, {
+
+    props: {
+        extraCls: "bi-switch",
+        height: 22,
+        width: 44,
+        logic: {
+            dynamic: false
+        }
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.absolute",
+            ref: function () {
+                self.layout = this;
+            },
+            items: [{
+                el: {
+                    type: "bi.text_button",
+                    cls: "circle-button bi-card"
+                },
+                width: 18,
+                height: 18,
+                top: 2,
+                left: this.options.selected ? 24 : 2
+            }]
+        }
+    },
+
+    setSelected: function (v) {
+        BI.Switch.superclass.setSelected.apply(this, arguments);
+        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.resize();
+    },
+
+    doClick: function () {
+        BI.Switch.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.Switch.EVENT_CHANGE);
+    }
+});
+BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.switch", BI.Switch);/**
  * guy
  * 复选框item
  * @type {*|void|Object}
diff --git a/dist/case.js b/dist/case.js
index 121c93d2ea..c27d041311 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -978,6 +978,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 });
 
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
+ * Created by Windy on 2018/2/1.
+ */
+/**
+ * guy
+ * 复选框item
+ * @type {*|void|Object}
+ */
+BI.Switch = BI.inherit(BI.BasicButton, {
+
+    props: {
+        extraCls: "bi-switch",
+        height: 22,
+        width: 44,
+        logic: {
+            dynamic: false
+        }
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.absolute",
+            ref: function () {
+                self.layout = this;
+            },
+            items: [{
+                el: {
+                    type: "bi.text_button",
+                    cls: "circle-button bi-card"
+                },
+                width: 18,
+                height: 18,
+                top: 2,
+                left: this.options.selected ? 24 : 2
+            }]
+        }
+    },
+
+    setSelected: function (v) {
+        BI.Switch.superclass.setSelected.apply(this, arguments);
+        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.resize();
+    },
+
+    doClick: function () {
+        BI.Switch.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.Switch.EVENT_CHANGE);
+    }
+});
+BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.switch", BI.Switch);/**
  * guy
  * 复选框item
  * @type {*|void|Object}
diff --git a/dist/demo.js b/dist/demo.js
index 7c4aa250d1..642c19279f 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -11594,6 +11594,9 @@ Demo.Items = BI.inherit(BI.Widget, {
             }, {
                 type: "bi.multi_select_item",
                 text: "复选项"
+            }, {
+                type: "bi.switch",
+                selected: true
             }],
             hgap: 300
         };
diff --git a/dist/fineui.css b/dist/fineui.css
index f303d72fe8..af8d564464 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -3167,6 +3167,21 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
 .bi-single-select-icon-text-item.active .b-font:before {
   color: #3685f2;
 }
+.bi-switch {
+  -webkit-border-radius: 40px 40px 40px 40px;
+  -moz-border-radius: 40px 40px 40px 40px;
+  border-radius: 40px 40px 40px 40px;
+  background-color: #d4dadd;
+}
+.bi-switch:active,
+.bi-switch.active {
+  background-color: #3f8ce8;
+}
+.bi-switch .circle-button {
+  -webkit-border-radius: 9px 9px 9px 9px;
+  -moz-border-radius: 9px 9px 9px 9px;
+  border-radius: 9px 9px 9px 9px;
+}
 .bi-code-editor .param {
   color: #ffffff;
   padding: 0 5px;
diff --git a/dist/fineui.js b/dist/fineui.js
index 752314313f..c2139974c1 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -65311,6 +65311,57 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
 });
 
 BI.shortcut("bi.plus_group_node", BI.PlusGroupNode);/**
+ * Created by Windy on 2018/2/1.
+ */
+/**
+ * guy
+ * 复选框item
+ * @type {*|void|Object}
+ */
+BI.Switch = BI.inherit(BI.BasicButton, {
+
+    props: {
+        extraCls: "bi-switch",
+        height: 22,
+        width: 44,
+        logic: {
+            dynamic: false
+        }
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.absolute",
+            ref: function () {
+                self.layout = this;
+            },
+            items: [{
+                el: {
+                    type: "bi.text_button",
+                    cls: "circle-button bi-card"
+                },
+                width: 18,
+                height: 18,
+                top: 2,
+                left: this.options.selected ? 24 : 2
+            }]
+        }
+    },
+
+    setSelected: function (v) {
+        BI.Switch.superclass.setSelected.apply(this, arguments);
+        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.resize();
+    },
+
+    doClick: function () {
+        BI.Switch.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.Switch.EVENT_CHANGE);
+    }
+});
+BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.switch", BI.Switch);/**
  * guy
  * 复选框item
  * @type {*|void|Object}
diff --git a/src/case/button/switch.js b/src/case/button/switch.js
new file mode 100644
index 0000000000..0a7b6ee778
--- /dev/null
+++ b/src/case/button/switch.js
@@ -0,0 +1,52 @@
+/**
+ * Created by Windy on 2018/2/1.
+ */
+/**
+ * guy
+ * 复选框item
+ * @type {*|void|Object}
+ */
+BI.Switch = BI.inherit(BI.BasicButton, {
+
+    props: {
+        extraCls: "bi-switch",
+        height: 22,
+        width: 44,
+        logic: {
+            dynamic: false
+        }
+    },
+
+    render: function () {
+        var self = this;
+        return {
+            type: "bi.absolute",
+            ref: function () {
+                self.layout = this;
+            },
+            items: [{
+                el: {
+                    type: "bi.text_button",
+                    cls: "circle-button bi-card"
+                },
+                width: 18,
+                height: 18,
+                top: 2,
+                left: this.options.selected ? 24 : 2
+            }]
+        }
+    },
+
+    setSelected: function (v) {
+        BI.Switch.superclass.setSelected.apply(this, arguments);
+        this.layout.attr("items")[0].left = v ? 24 : 2;
+        this.layout.resize();
+    },
+
+    doClick: function () {
+        BI.Switch.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.Switch.EVENT_CHANGE);
+    }
+});
+BI.Switch.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.switch", BI.Switch);
\ No newline at end of file
diff --git a/src/css/base/single/button/switch.css b/src/css/base/single/button/switch.css
new file mode 100644
index 0000000000..6cd02ad842
--- /dev/null
+++ b/src/css/base/single/button/switch.css
@@ -0,0 +1,15 @@
+.bi-switch {
+  -webkit-border-radius: 40px 40px 40px 40px;
+  -moz-border-radius: 40px 40px 40px 40px;
+  border-radius: 40px 40px 40px 40px;
+  background-color: #d4dadd;
+}
+.bi-switch:active,
+.bi-switch.active {
+  background-color: #3f8ce8;
+}
+.bi-switch .circle-button {
+  -webkit-border-radius: 9px 9px 9px 9px;
+  -moz-border-radius: 9px 9px 9px 9px;
+  border-radius: 9px 9px 9px 9px;
+}
diff --git a/src/less/base/single/button/switch.less b/src/less/base/single/button/switch.less
new file mode 100644
index 0000000000..2ff516a4d8
--- /dev/null
+++ b/src/less/base/single/button/switch.less
@@ -0,0 +1,12 @@
+@import "../../../index";
+
+.bi-switch{
+  .border-radius(40px 40px 40px 40px);
+  background-color: @background-color-dark;
+  &:active, &.active {
+    background-color: @color-bi-background-highlight;
+  }
+  & .circle-button{
+    .border-radius(9px 9px 9px 9px);
+  }
+}
\ No newline at end of file