diff --git a/one/docs/demo/calendar/fill-month.vue b/one/docs/demo/calendar/fill-month.vue
index e3b8ca9..d81dfb5 100644
--- a/one/docs/demo/calendar/fill-month.vue
+++ b/one/docs/demo/calendar/fill-month.vue
@@ -1,19 +1,21 @@
 <template>
 <article>
-  <p>
-    fill-month: <veui-switch v-model="isFill"/>
-  </p>
+  <section>
+    <veui-checkbox v-model="isFill">
+      Fill month
+    </veui-checkbox>
+  </section>
   <veui-calendar :fill-month="isFill"/>
 </article>
 </template>
 
 <script>
-import { Calendar, Switch } from 'veui'
+import { Calendar, Checkbox } from 'veui'
 
 export default {
   components: {
     'veui-calendar': Calendar,
-    'veui-switch': Switch
+    'veui-checkbox': Checkbox
   },
   data () {
     return {
@@ -25,7 +27,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.veui-radio-group {
+section {
   margin-bottom: 20px;
 }
 </style>
diff --git a/one/docs/demo/check-button-group/stable.vue b/one/docs/demo/check-button-group/stable.vue
index a176869..2339994 100644
--- a/one/docs/demo/check-button-group/stable.vue
+++ b/one/docs/demo/check-button-group/stable.vue
@@ -1,25 +1,25 @@
 <template>
 <article>
   <section>
-    <p>
-      最小宽度：<veui-switch v-model="isStable"/>
-    </p>
-    <veui-check-button-group
-      v-model="flavor"
-      :items="flavors"
-      :ui="isStable ? 'stable' : ''"
-    />
+    <veui-checkbox v-model="isStable">
+      Stable layout
+    </veui-checkbox>
   </section>
+  <veui-check-button-group
+    v-model="flavor"
+    :items="flavors"
+    :ui="isStable ? 'stable' : ''"
+  />
 </article>
 </template>
 
 <script>
-import { CheckButtonGroup, Switch } from 'veui'
+import { CheckButtonGroup, Checkbox } from 'veui'
 
 export default {
   components: {
     'veui-check-button-group': CheckButtonGroup,
-    'veui-switch': Switch
+    'veui-checkbox': Checkbox
   },
   data () {
     return {
@@ -39,8 +39,4 @@ export default {
 section {
   margin-bottom: 20px;
 }
-
-h4 {
-  margin-top: 0;
-}
 </style>
diff --git a/one/docs/demo/dialog/size.vue b/one/docs/demo/dialog/size.vue
index 50ed8fe..4437c16 100644
--- a/one/docs/demo/dialog/size.vue
+++ b/one/docs/demo/dialog/size.vue
@@ -26,11 +26,11 @@
     :ui="ui"
     :open.sync="open"
   >
-    <p>Current UI: "{{ ui }}"</p>
-    <p v-if="ui === 's' || ui === 'm'">
+    <section>Current UI: "{{ ui }}"</section>
+    <section v-if="ui === 's' || ui === 'm'">
       <veui-button>Button size: {{ ui }}</veui-button>
       <veui-switch>{{ ui }}</veui-switch>
-    </p>
+    </section>
   </veui-dialog>
 </article>
 </template>
diff --git a/one/docs/demo/input/composition.vue b/one/docs/demo/input/composition.vue
index 3d0cf22..a993360 100644
--- a/one/docs/demo/input/composition.vue
+++ b/one/docs/demo/input/composition.vue
@@ -1,10 +1,12 @@
 <template>
 <article>
   <section>
-    <p>
-      composition: <veui-switch v-model="composition"/>
-    </p>
-    <p>Input value: {{ value }}</p>
+    <veui-checkbox v-model="composition">
+      Composition
+    </veui-checkbox>
+  </section>
+  <section>Input value: {{ value }}</section>
+  <section>
     <veui-input
       v-model="value"
       :composition="composition"
@@ -14,12 +16,12 @@
 </template>
 
 <script>
-import { Input, Switch } from 'veui'
+import { Input, Checkbox } from 'veui'
 
 export default {
   components: {
     'veui-input': Input,
-    'veui-switch': Switch
+    'veui-checkbox': Checkbox
   },
   data () {
     return {
@@ -29,3 +31,9 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+section {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/one/docs/demo/number-input/disabled.vue b/one/docs/demo/number-input/disabled.vue
index 91fe067..502ca1c 100644
--- a/one/docs/demo/number-input/disabled.vue
+++ b/one/docs/demo/number-input/disabled.vue
@@ -6,26 +6,25 @@
     </veui-checkbox>
   </section>
   <section>
-    <p>
-      <veui-number-input
-        v-model="value"
-        :disabled="disabled"
-      />
-    </p>
-    <p>
-      <veui-number-input
-        v-model="value"
-        :disabled="disabled"
-        ui="s"
-      />
-    </p>
-    <p>
-      <veui-number-input
-        v-model="value"
-        :disabled="disabled"
-        ui="xs"
-      />
-    </p>
+    section
+    <veui-number-input
+      v-model="value"
+      :disabled="disabled"
+    />
+  </section>
+  <section>
+    <veui-number-input
+      v-model="value"
+      :disabled="disabled"
+      ui="s"
+    />
+  </section>
+  <section>
+    <veui-number-input
+      v-model="value"
+      :disabled="disabled"
+      ui="xs"
+    />
   </section>
 </article>
 </template>
@@ -48,8 +47,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-section,
-p {
-  margin-bottom: 1em;
+section {
+  margin-bottom: 20px;
 }
 </style>
diff --git a/one/docs/demo/number-input/readonly.vue b/one/docs/demo/number-input/readonly.vue
index 8618430..452f75b 100644
--- a/one/docs/demo/number-input/readonly.vue
+++ b/one/docs/demo/number-input/readonly.vue
@@ -6,26 +6,24 @@
     </veui-checkbox>
   </section>
   <section>
-    <p>
-      <veui-number-input
-        v-model="value"
-        :readonly="readonly"
-      />
-    </p>
-    <p>
-      <veui-number-input
-        v-model="value"
-        :readonly="readonly"
-        ui="s"
-      />
-    </p>
-    <p>
-      <veui-number-input
-        v-model="value"
-        :readonly="readonly"
-        ui="xs"
-      />
-    </p>
+    <veui-number-input
+      v-model="value"
+      :readonly="readonly"
+    />
+  </section>
+  <section>
+    <veui-number-input
+      v-model="value"
+      :readonly="readonly"
+      ui="s"
+    />
+  </section>
+  <section>
+    <veui-number-input
+      v-model="value"
+      :readonly="readonly"
+      ui="xs"
+    />
   </section>
 </article>
 </template>
@@ -48,8 +46,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-section,
-p {
+section {
   margin-bottom: 1em;
 }
 </style>
diff --git a/one/docs/demo/number-input/size.vue b/one/docs/demo/number-input/size.vue
index 63ebe13..d0c39cb 100644
--- a/one/docs/demo/number-input/size.vue
+++ b/one/docs/demo/number-input/size.vue
@@ -1,20 +1,20 @@
 <template>
 <article>
-  <p>
+  <section>
     <veui-number-input v-model="value"/>
-  </p>
-  <p>
+  </section>
+  <section>
     <veui-number-input
       v-model="value"
       ui="s"
     />
-  </p>
-  <p>
+  </section>
+  <section>
     <veui-number-input
       v-model="value"
       ui="xs"
     />
-  </p>
+  </section>
 </article>
 </template>
 
@@ -34,7 +34,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-p {
-  margin-bottom: 1em;
+section {
+  margin-bottom: 20px;
 }
 </style>
diff --git a/one/docs/demo/radio-button-group/stable.vue b/one/docs/demo/radio-button-group/stable.vue
index 8d6f3fe..400a616 100644
--- a/one/docs/demo/radio-button-group/stable.vue
+++ b/one/docs/demo/radio-button-group/stable.vue
@@ -1,25 +1,26 @@
 <template>
 <article>
   <section>
-    <p>
-      最小宽度：<veui-switch v-model="isStable"/>
-    </p>
-    <veui-radio-button-group
-      v-model="flavor"
-      :items="flavors"
-      :ui="isStable ? 'stable' : ''"
-    />
+    <veui-checkbox v-model="isStable">
+      Stable layout
+    </veui-checkbox>
+  </section>
+  <veui-radio-button-group
+    v-model="flavor"
+    :items="flavors"
+    :ui="isStable ? 'stable' : ''"
+  />
   </section>
 </article>
 </template>
 
 <script>
-import { RadioButtonGroup, Switch } from 'veui'
+import { RadioButtonGroup, Checkbox } from 'veui'
 
 export default {
   components: {
     'veui-radio-button-group': RadioButtonGroup,
-    'veui-switch': Switch
+    'veui-checkbox': Checkbox
   },
   data () {
     return {
diff --git a/one/docs/demo/table/order.vue b/one/docs/demo/table/order.vue
index e704e42..2693bf8 100644
--- a/one/docs/demo/table/order.vue
+++ b/one/docs/demo/table/order.vue
@@ -2,10 +2,12 @@
 <article>
   <section>
     <div>
-      允许不排序：<veui-switch
+      <veui-checkbox
         v-model="allowFalse"
         @change="handleChange"
-      />
+      >
+        Allow unordered
+      </veui-checkbox>
     </div>
     <veui-table
       :data="sorted"
@@ -41,7 +43,7 @@
 </template>
 
 <script>
-import { Table, Column, Switch } from 'veui'
+import { Table, Column, Checkbox } from 'veui'
 
 let data = [
   {
@@ -76,7 +78,7 @@ export default {
   components: {
     'veui-table': Table,
     'veui-table-column': Column,
-    'veui-switch': Switch
+    'veui-checkbox': Checkbox
   },
   filters: {
     currency (value) {