diff --git a/components/checkbox/Checkbox.vue b/components/checkbox/Checkbox.vue
index 826666e5a..a8539ddf7 100644
--- a/components/checkbox/Checkbox.vue
+++ b/components/checkbox/Checkbox.vue
@@ -32,13 +32,13 @@ export default {
     prop: 'checked',
   },
   inject: {
-    context: { default: undefined },
+    checkboxGroupContext: { default: undefined },
   },
   data () {
-    const { context, checked, defaultChecked, value } = this
+    const { checkboxGroupContext, checked, defaultChecked, value } = this
     let stateChecked
-    if (context && context.checkedStatus) {
-      stateChecked = context.checkedStatus.has(value)
+    if (checkboxGroupContext && checkboxGroupContext.checkedStatus) {
+      stateChecked = checkboxGroupContext.checkedStatus.has(value)
     }
     return {
       stateChecked: stateChecked === undefined
@@ -72,8 +72,8 @@ export default {
     handleChange (event) {
       const targetChecked = event.target.checked
       this.$emit('input', targetChecked)
-      const { name, value, checked, context, stateChecked } = this
-      if ((checked === undefined && !context) || (context && context.value === undefined)) {
+      const { name, value, checked, checkboxGroupContext, stateChecked } = this
+      if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.value === undefined)) {
         this.stateChecked = targetChecked
       }
       const target = {
@@ -81,8 +81,8 @@ export default {
         value,
         checked: !stateChecked,
       }
-      if (this.context) {
-        this.context.handleChange({ target })
+      if (this.checkboxGroupContext) {
+        this.checkboxGroupContext.handleChange({ target })
       } else {
         this.$emit('change', {
           target,
@@ -100,7 +100,7 @@ export default {
     checked (val) {
       this.stateChecked = val
     },
-    'context.checkedStatus': function (checkedStatus) {
+    'checkboxGroupContext.checkedStatus': function (checkedStatus) {
       this.stateChecked = checkedStatus.has(this.value)
     },
   },
diff --git a/components/checkbox/Group.vue b/components/checkbox/Group.vue
index 1668f846a..31ba2252d 100644
--- a/components/checkbox/Group.vue
+++ b/components/checkbox/Group.vue
@@ -1,8 +1,9 @@
 <template>
   <div :class="`${prefixCls}`">
-    <Checkbox v-for="item in checkOptions" :key="item.value" :checked="checkedStatus.has(item.value)"
-      :value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Checkbox>
-    <slot v-if="options.length === 0"></slot>
+    <Checkbox v-for="item in checkOptions" :key="item.value" :value="item.value" :disabled="item.disabled">
+      {{item.label}}
+    </Checkbox>
+    <slot v-if="checkOptions.length === 0"></slot>
   </div>
 </template>
 <script>
@@ -33,7 +34,7 @@ export default {
   },
   provide () {
     return {
-      context: this,
+      checkboxGroupContext: this,
     }
   },
   data () {
diff --git a/components/index.js b/components/index.js
index be9cf66de..eb40554f5 100644
--- a/components/index.js
+++ b/components/index.js
@@ -12,6 +12,8 @@ export { default as Rate } from './rate'
 
 export { default as ToolTip } from './tooltip'
 
+export { default as Pagination } from './pagination'
+
 export { default as Row } from './grid/Row'
 
 export { default as Col } from './grid/Col'
diff --git a/components/pagination/KeyCode.js b/components/pagination/KeyCode.js
new file mode 100644
index 000000000..ab021ec9b
--- /dev/null
+++ b/components/pagination/KeyCode.js
@@ -0,0 +1,14 @@
+export default {
+  ZERO: 48,
+  NINE: 57,
+
+  NUMPAD_ZERO: 96,
+  NUMPAD_NINE: 105,
+
+  BACKSPACE: 8,
+  DELETE: 46,
+  ENTER: 13,
+
+  ARROW_UP: 38,
+  ARROW_DOWN: 40,
+}
diff --git a/components/pagination/Pager.vue b/components/pagination/Pager.vue
new file mode 100644
index 000000000..d9fc0ca54
--- /dev/null
+++ b/components/pagination/Pager.vue
@@ -0,0 +1,44 @@
+<template>
+  <li
+    :class="classes"
+    @click="handleClick"
+    @keyPress="handleKeyPress"
+    :title="showTitle ? 'page' : null">
+    <a>{{page}}</a>
+  </li>
+</template>
+<script>
+export default {
+  name: 'Page',
+  props: {
+    rootPrefixCls: String,
+    page: Number,
+    active: Boolean,
+    showTitle: Boolean,
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    classes () {
+      const prefixCls = `${this.rootPrefixCls}-item`
+      let cls = `${prefixCls} ${prefixCls}-${this.page}`
+      if (this.active) {
+        cls = `${cls} ${prefixCls}-active`
+      }
+      if (this.className) {
+        cls = `${cls} ${this.className}`
+      }
+      return cls
+    },
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click', this.page)
+    },
+    handleKeyPress (event) {
+      this.$emit('keyPress', event, this.handleClick, this.page)
+    },
+  },
+}
+</script>
diff --git a/components/pagination/demo/pagination.vue b/components/pagination/demo/pagination.vue
new file mode 100644
index 000000000..2787d175d
--- /dev/null
+++ b/components/pagination/demo/pagination.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div style="margin-bottom:10px">
+      <pagination :simple="simple" :current="current" :total="total"></pagination>
+    </div>
+    <div style="margin-bottom:10px">
+      <pagination :current="current" :total="total"></pagination>
+      <vc-button @click="changeValue">改值</vc-button>
+    </div>
+    <div>
+      <pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
+      <vc-button @click="changeValue">改值</vc-button>
+      <vc-button @click="getValue">当前值</vc-button>
+    </div>
+  </div>
+</template>
+<script>
+import '../style'
+import { Pagination, Button } from 'antd/index'
+export default {
+  data () {
+    return {
+      simple: true,
+      current: 1,
+      total: 483,
+    }
+  },
+  methods: {
+    changeValue () {
+      this.current = 4
+    },
+    getValue () {
+      alert(this.current)
+    },
+    showTotal (total) {
+      return `共 ${total} 条`
+    },
+  },
+  components: {
+    Pagination,
+    vcButton: Button,
+  },
+}
+</script>
diff --git a/components/pagination/index.js b/components/pagination/index.js
index e69de29bb..146641219 100644
--- a/components/pagination/index.js
+++ b/components/pagination/index.js
@@ -0,0 +1,3 @@
+import Pagination from './Pagination'
+
+export default Pagination
diff --git a/components/pagination/locale/ar_EG.js b/components/pagination/locale/ar_EG.js
new file mode 100644
index 000000000..3d0e9565e
--- /dev/null
+++ b/components/pagination/locale/ar_EG.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ الصفحة',
+  jump_to: 'الذهاب إلى',
+  jump_to_confirm: 'تأكيد',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'الصفحة السابقة',
+  next_page: 'الصفحة التالية',
+  prev_5: 'خمس صفحات سابقة',
+  next_5: 'خمس صفحات تالية',
+  prev_3: 'ثلاث صفحات سابقة',
+  next_3: 'ثلاث صفحات تالية',
+};
diff --git a/components/pagination/locale/bg_BG.js b/components/pagination/locale/bg_BG.js
new file mode 100644
index 000000000..866229fb1
--- /dev/null
+++ b/components/pagination/locale/bg_BG.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ страница',
+  jump_to: 'Към',
+  jump_to_confirm: 'потвърждавам',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Предишна страница',
+  next_page: 'Следваща страница',
+  prev_5: 'Предишни 5 страници',
+  next_5: 'Следващи 5 страници',
+  prev_3: 'Предишни 3 страници',
+  next_3: 'Следващи 3 страници',
+};
diff --git a/components/pagination/locale/ca_ES.js b/components/pagination/locale/ca_ES.js
new file mode 100644
index 000000000..49e06f74a
--- /dev/null
+++ b/components/pagination/locale/ca_ES.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pàgina',
+  jump_to: 'Anar a',
+  jump_to_confirm: 'Confirma',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Pàgina prèvia',
+  next_page: 'Pàgina següent',
+  prev_5: '5 pàgines prèvies',
+  next_5: '5 pàgines següents',
+  prev_3: '3 pàgines prèvies',
+  next_3: '3 pàgines següents',
+};
diff --git a/components/pagination/locale/cs_CZ.js b/components/pagination/locale/cs_CZ.js
new file mode 100644
index 000000000..9a45a1466
--- /dev/null
+++ b/components/pagination/locale/cs_CZ.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ strana',
+  jump_to: 'Přejít',
+  jump_to_confirm: 'potvrdit',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Předchozí strana',
+  next_page: 'Následující strana',
+  prev_5: 'Předchozích 5 stran',
+  next_5: 'Následujících 5 stran',
+  prev_3: 'Předchozí 3 strany',
+  next_3: 'Následující 3 strany',
+};
diff --git a/components/pagination/locale/da_DK.js b/components/pagination/locale/da_DK.js
new file mode 100644
index 000000000..277e1efdc
--- /dev/null
+++ b/components/pagination/locale/da_DK.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ side',
+  jump_to: 'Gå til',
+  jump_to_confirm: 'bekræft',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Forrige Side',
+  next_page: 'Næste Side',
+  prev_5: 'Forrige 5 Sider',
+  next_5: 'Næste 5 Sider',
+  prev_3: 'Forrige 3 Sider',
+  next_3: 'Næste 3 Sider',
+};
diff --git a/components/pagination/locale/de_DE.js b/components/pagination/locale/de_DE.js
new file mode 100644
index 000000000..e6dd0215b
--- /dev/null
+++ b/components/pagination/locale/de_DE.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ Seite',
+  jump_to: 'Gehe zu',
+  jump_to_confirm: 'bestätigen',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Vorherige Seite',
+  next_page: 'Nächste Seite',
+  prev_5: '5 Seiten zurück',
+  next_5: '5 Seiten vor',
+  prev_3: '3 Seiten zurück',
+  next_3: '3 Seiten vor',
+};
diff --git a/components/pagination/locale/el_GR.js b/components/pagination/locale/el_GR.js
new file mode 100644
index 000000000..af0d6ea2e
--- /dev/null
+++ b/components/pagination/locale/el_GR.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ σελίδα',
+  jump_to: 'Μετάβαση',
+  jump_to_confirm: 'επιβεβαιώνω',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Προηγούμενη Σελίδα',
+  next_page: 'Επόμενη Σελίδα',
+  prev_5: 'Προηγούμενες 5 Σελίδες',
+  next_5: 'Επόμενες 5 σελίδες',
+  prev_3: 'Προηγούμενες 3 Σελίδες',
+  next_3: 'Επόμενες 3 Σελίδες',
+};
diff --git a/components/pagination/locale/en_GB.js b/components/pagination/locale/en_GB.js
new file mode 100644
index 000000000..f603e5e5a
--- /dev/null
+++ b/components/pagination/locale/en_GB.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Goto',
+  jump_to_confirm: 'confirm',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Previous Page',
+  next_page: 'Next Page',
+  prev_5: 'Previous 5 Pages',
+  next_5: 'Next 5 Pages',
+  prev_3: 'Previous 3 Pages',
+  next_3: 'Next 3 Pages',
+};
diff --git a/components/pagination/locale/en_US.js b/components/pagination/locale/en_US.js
new file mode 100644
index 000000000..f603e5e5a
--- /dev/null
+++ b/components/pagination/locale/en_US.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Goto',
+  jump_to_confirm: 'confirm',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Previous Page',
+  next_page: 'Next Page',
+  prev_5: 'Previous 5 Pages',
+  next_5: 'Next 5 Pages',
+  prev_3: 'Previous 3 Pages',
+  next_3: 'Next 3 Pages',
+};
diff --git a/components/pagination/locale/es_ES.js b/components/pagination/locale/es_ES.js
new file mode 100644
index 000000000..595f21976
--- /dev/null
+++ b/components/pagination/locale/es_ES.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ página',
+  jump_to: 'Ir a',
+  jump_to_confirm: 'confirmar',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Página anterior',
+  next_page: 'Página siguiente',
+  prev_5: '5 páginas previas',
+  next_5: '5 páginas siguientes',
+  prev_3: '3 páginas previas',
+  next_3: '3 páginas siguientes',
+};
diff --git a/components/pagination/locale/et_EE.js b/components/pagination/locale/et_EE.js
new file mode 100644
index 000000000..f65740415
--- /dev/null
+++ b/components/pagination/locale/et_EE.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ leheküljel',
+  jump_to: 'Hüppa',
+  jump_to_confirm: 'Kinnitage',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Eelmine leht',
+  next_page: 'Järgmine leht',
+  prev_5: 'Eelmised 5 lehekülge',
+  next_5: 'Järgmised 5 lehekülge',
+  prev_3: 'Eelmised 3 lehekülge',
+  next_3: 'Järgmised 3 lehekülge',
+};
diff --git a/components/pagination/locale/fa_IR.js b/components/pagination/locale/fa_IR.js
new file mode 100644
index 000000000..65409601d
--- /dev/null
+++ b/components/pagination/locale/fa_IR.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ صفحه',
+  jump_to: 'برو به',
+  jump_to_confirm: 'تایید',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'صفحه قبلی',
+  next_page: 'صفحه بعدی',
+  prev_5: '۵ صفحه قبلی',
+  next_5: '۵ صفحه بعدی',
+  prev_3: '۳ صفحه قبلی',
+  next_3: '۳ صفحه بعدی',
+};
diff --git a/components/pagination/locale/fi_FI.js b/components/pagination/locale/fi_FI.js
new file mode 100644
index 000000000..40305d084
--- /dev/null
+++ b/components/pagination/locale/fi_FI.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ sivu',
+  jump_to: 'Mene',
+  jump_to_confirm: 'Potvrdite',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Edellinen sivu',
+  next_page: 'Seuraava sivu',
+  prev_5: 'Edelliset 5 sivua',
+  next_5: 'Seuraavat 5 sivua',
+  prev_3: 'Edelliset 3 sivua',
+  next_3: 'Seuraavat 3 sivua',
+};
diff --git a/components/pagination/locale/fr_BE.js b/components/pagination/locale/fr_BE.js
new file mode 100644
index 000000000..e71070622
--- /dev/null
+++ b/components/pagination/locale/fr_BE.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Aller à',
+  jump_to_confirm: 'confirmer',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Page précédente',
+  next_page: 'Page suivante',
+  prev_5: '5 Pages précédentes',
+  next_5: '5 Pages suivantes',
+  prev_3: '3 Pages précédentes',
+  next_3: '3 Pages suivantes',
+};
diff --git a/components/pagination/locale/fr_FR.js b/components/pagination/locale/fr_FR.js
new file mode 100644
index 000000000..e71070622
--- /dev/null
+++ b/components/pagination/locale/fr_FR.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Aller à',
+  jump_to_confirm: 'confirmer',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Page précédente',
+  next_page: 'Page suivante',
+  prev_5: '5 Pages précédentes',
+  next_5: '5 Pages suivantes',
+  prev_3: '3 Pages précédentes',
+  next_3: '3 Pages suivantes',
+};
diff --git a/components/pagination/locale/is_IS.js b/components/pagination/locale/is_IS.js
new file mode 100644
index 000000000..962c35a9a
--- /dev/null
+++ b/components/pagination/locale/is_IS.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ síðu',
+  jump_to: 'Síða',
+  jump_to_confirm: 'staðfest',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Fyrri síða',
+  next_page: 'Næsta síða',
+  prev_5: 'Til baka 5 síður',
+  next_5: 'Áfram 5 síður',
+  prev_3: 'Til baka 3 síður',
+  next_3: 'Áfram 3 síður',
+};
diff --git a/components/pagination/locale/it_IT.js b/components/pagination/locale/it_IT.js
new file mode 100644
index 000000000..11fa62123
--- /dev/null
+++ b/components/pagination/locale/it_IT.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pagina',
+  jump_to: 'vai a',
+  jump_to_confirm: 'Conferma',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Pagina precedente',
+  next_page: 'Pagina successiva',
+  prev_5: 'Precedente 5 pagine',
+  next_5: 'Prossime 5 pagine',
+  prev_3: 'Precedente 3 pagine',
+  next_3: 'Prossime 3 pagine',
+};
diff --git a/components/pagination/locale/ja_JP.js b/components/pagination/locale/ja_JP.js
new file mode 100644
index 000000000..f0ebaa9f7
--- /dev/null
+++ b/components/pagination/locale/ja_JP.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ ページ',
+  jump_to: '移動',
+  jump_to_confirm: '確認する',
+  page: 'ページ',
+
+  // Pagination.jsx
+  prev_page: '前のページ',
+  next_page: '次のページ',
+  prev_5: '前 5ページ',
+  next_5: '次 5ページ',
+  prev_3: '前 3ページ',
+  next_3: '次 3ページ',
+};
diff --git a/components/pagination/locale/ko_KR.js b/components/pagination/locale/ko_KR.js
new file mode 100644
index 000000000..3bdadcb68
--- /dev/null
+++ b/components/pagination/locale/ko_KR.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ 쪽',
+  jump_to: '이동하기',
+  jump_to_confirm: '확인하다',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: '이전 페이지',
+  next_page: '다음 페이지',
+  prev_5: '이전 5 페이지',
+  next_5: '다음 5 페이지',
+  prev_3: '이전 3 페이지',
+  next_3: '다음 3 페이지',
+};
diff --git a/components/pagination/locale/nb_NO.js b/components/pagination/locale/nb_NO.js
new file mode 100644
index 000000000..fb70c4520
--- /dev/null
+++ b/components/pagination/locale/nb_NO.js
@@ -0,0 +1,14 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ side',
+  jump_to: 'Gå til side',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Forrige side',
+  next_page: 'Neste side',
+  prev_5: '5 forrige',
+  next_5: '5 neste',
+  prev_3: '3 forrige',
+  next_3: '3 neste',
+};
diff --git a/components/pagination/locale/nl_BE.js b/components/pagination/locale/nl_BE.js
new file mode 100644
index 000000000..26a327b37
--- /dev/null
+++ b/components/pagination/locale/nl_BE.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pagina',
+  jump_to: 'Ga naar',
+  jump_to_confirm: 'bevestigen',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Vorige pagina',
+  next_page: 'Volgende pagina',
+  prev_5: 'Vorige 5 pagina\'s',
+  next_5: 'Volgende 5 pagina\'s',
+  prev_3: 'Vorige 3 pagina\'s',
+  next_3: 'Volgende 3 pagina\'s',
+};
diff --git a/components/pagination/locale/nl_NL.js b/components/pagination/locale/nl_NL.js
new file mode 100644
index 000000000..26a327b37
--- /dev/null
+++ b/components/pagination/locale/nl_NL.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pagina',
+  jump_to: 'Ga naar',
+  jump_to_confirm: 'bevestigen',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Vorige pagina',
+  next_page: 'Volgende pagina',
+  prev_5: 'Vorige 5 pagina\'s',
+  next_5: 'Volgende 5 pagina\'s',
+  prev_3: 'Vorige 3 pagina\'s',
+  next_3: 'Volgende 3 pagina\'s',
+};
diff --git a/components/pagination/locale/pl_PL.js b/components/pagination/locale/pl_PL.js
new file mode 100644
index 000000000..7c16a7305
--- /dev/null
+++ b/components/pagination/locale/pl_PL.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ stronę',
+  jump_to: 'Idź do',
+  jump_to_confirm: 'potwierdzać',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Poprzednia strona',
+  next_page: 'Następna strona',
+  prev_5: 'Poprzednie 5 stron',
+  next_5: 'Następne 5 stron',
+  prev_3: 'Poprzednie 3 strony',
+  next_3: 'Następne 3 strony',
+};
diff --git a/components/pagination/locale/pt_BR.js b/components/pagination/locale/pt_BR.js
new file mode 100644
index 000000000..399aca9e8
--- /dev/null
+++ b/components/pagination/locale/pt_BR.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ páginas',
+  jump_to: 'Vá até',
+  jump_to_confirm: 'confirme',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Página anterior',
+  next_page: 'Próxima página',
+  prev_5: '5 páginas anteriores',
+  next_5: '5 próximas páginas',
+  prev_3: '3 páginas anteriores',
+  next_3: '3 próximas páginas',
+};
diff --git a/components/pagination/locale/pt_PT.js b/components/pagination/locale/pt_PT.js
new file mode 100644
index 000000000..2f817a70e
--- /dev/null
+++ b/components/pagination/locale/pt_PT.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ página',
+  jump_to: 'Saltar',
+  jump_to_confirm: 'confirmar',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Página Anterior',
+  next_page: 'Página Seguinte',
+  prev_5: 'Recuar 5 Páginas',
+  next_5: 'Avançar 5 Páginas',
+  prev_3: 'Recuar 3 Páginas',
+  next_3: 'Avançar 3 Páginas',
+};
diff --git a/components/pagination/locale/ru_RU.js b/components/pagination/locale/ru_RU.js
new file mode 100644
index 000000000..19ece3f95
--- /dev/null
+++ b/components/pagination/locale/ru_RU.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/странице',
+  jump_to: 'Перейти',
+  jump_to_confirm: 'подтвердить',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Назад',
+  next_page: 'Вперед',
+  prev_5: 'Предыдущие 5',
+  next_5: 'Следующие 5',
+  prev_3: 'Предыдущие 3',
+  next_3: 'Следующие 3',
+};
diff --git a/components/pagination/locale/sk_SK.js b/components/pagination/locale/sk_SK.js
new file mode 100644
index 000000000..0cf023021
--- /dev/null
+++ b/components/pagination/locale/sk_SK.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ strana',
+  jump_to: 'Choď na',
+  jump_to_confirm: 'potvrdit',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Predchádzajúca strana',
+  next_page: 'Nasledujúca strana',
+  prev_5: 'Predchádzajúcich 5 strán',
+  next_5: 'Nasledujúcich 5 strán',
+  prev_3: 'Predchádzajúce 3 strany',
+  next_3: 'Nasledujúce 3 strany',
+};
diff --git a/components/pagination/locale/sr_RS.js b/components/pagination/locale/sr_RS.js
new file mode 100644
index 000000000..a8c526b12
--- /dev/null
+++ b/components/pagination/locale/sr_RS.js
@@ -0,0 +1,14 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ strani',
+  jump_to: 'Idi na',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Prethodna strana',
+  next_page: 'Sledeća strana',
+  prev_5: 'Prethodnih 5 Strana',
+  next_5: 'Sledećih 5 Strana',
+  prev_3: 'Prethodnih 3 Strane',
+  next_3: 'Sledećih 3 Strane',
+};
diff --git a/components/pagination/locale/sv_SE.js b/components/pagination/locale/sv_SE.js
new file mode 100644
index 000000000..0c2f48c0e
--- /dev/null
+++ b/components/pagination/locale/sv_SE.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ sida',
+  jump_to: 'Gå till',
+  jump_to_confirm: 'bekräfta',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Föreg sida',
+  next_page: 'Nästa sida',
+  prev_5: 'Föreg 5 sidor',
+  next_5: 'Nästa 5 sidor',
+  prev_3: 'Föreg 3 sidor',
+  next_3: 'Nästa 3 sidor',
+};
diff --git a/components/pagination/locale/th_TH.js b/components/pagination/locale/th_TH.js
new file mode 100644
index 000000000..9cfa90a7d
--- /dev/null
+++ b/components/pagination/locale/th_TH.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ หน้า',
+  jump_to: 'ไปยัง',
+  jump_to_confirm: 'ยืนยัน',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'หน้าก่อนหน้า',
+  next_page: 'หน้าถัดไป',
+  prev_5: 'ย้อนกลับ 5 หน้า',
+  next_5: 'ถัดไป 5 หน้า',
+  prev_3: 'ย้อนกลับ 3 หน้า',
+  next_3: 'ถัดไป 3 หน้า',
+};
diff --git a/components/pagination/locale/uk_UA.js b/components/pagination/locale/uk_UA.js
new file mode 100644
index 000000000..bab3544c4
--- /dev/null
+++ b/components/pagination/locale/uk_UA.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ сторінці',
+  jump_to: 'Перейти',
+  jump_to_confirm: 'підтвердити',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Попередня сторінка',
+  next_page: 'Наступна сторінка',
+  prev_5: 'Попередні 5 сторінок',
+  next_5: 'Наступні 5 сторінок',
+  prev_3: 'Попередні 3 сторінки',
+  next_3: 'Наступні 3 сторінки',
+};
diff --git a/components/pagination/locale/vi_VN.js b/components/pagination/locale/vi_VN.js
new file mode 100644
index 000000000..7ffbf7de9
--- /dev/null
+++ b/components/pagination/locale/vi_VN.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ trang',
+  jump_to: 'Đến',
+  jump_to_confirm: 'xác nhận',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Trang Trước',
+  next_page: 'Trang Kế',
+  prev_5: 'Về 5 Trang Trước',
+  next_5: 'Đến 5 Trang Kế',
+  prev_3: 'Về 3 Trang Trước',
+  next_3: 'Đến 3 Trang Kế',
+};
diff --git a/components/pagination/locale/zh_CN.js b/components/pagination/locale/zh_CN.js
new file mode 100644
index 000000000..0db7d226e
--- /dev/null
+++ b/components/pagination/locale/zh_CN.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '条/页',
+  jump_to: '跳至',
+  jump_to_confirm: '确定',
+  page: '页',
+
+  // Pagination.jsx
+  prev_page: '上一页',
+  next_page: '下一页',
+  prev_5: '向前 5 页',
+  next_5: '向后 5 页',
+  prev_3: '向前 3 页',
+  next_3: '向后 3 页',
+};
diff --git a/components/pagination/locale/zh_TW.js b/components/pagination/locale/zh_TW.js
new file mode 100644
index 000000000..2654d3bbb
--- /dev/null
+++ b/components/pagination/locale/zh_TW.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '條/頁',
+  jump_to: '跳至',
+  jump_to_confirm: '確定',
+  page: '頁',
+
+  // Pagination.jsx
+  prev_page: '上一頁',
+  next_page: '下一頁',
+  prev_5: '向前 5 頁',
+  next_5: '向後 5 頁',
+  prev_3: '向前 3 頁',
+  next_3: '向後 3 頁',
+};
diff --git a/components/pagination/pagination.vue b/components/pagination/pagination.vue
index e69de29bb..361bab746 100644
--- a/components/pagination/pagination.vue
+++ b/components/pagination/pagination.vue
@@ -0,0 +1,437 @@
+<script>
+import Button from '../button/index'
+import Pager from './Pager'
+import locale from './locale/zh_CN'
+import KEYCODE from './KeyCode'
+
+export default {
+  name: 'Pagination',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pagination',
+    },
+    current: {
+      type: Number,
+      default: 1,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
+    onChange: {
+      type: Function,
+      default: () => {},
+    },
+    showSizeChanger: {
+      type: Boolean,
+      default: false,
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => ['10', '20', '30', '40'],
+    },
+    onShowSizeChange: {
+      type: Function,
+      default: () => {},
+    },
+    showQuickJumper: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+    simple: Boolean,
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+    showTotal: Function,
+  },
+  model: {
+    prop: 'current',
+  },
+  data () {
+    const { current } = this
+    return {
+      stateCurrent: current,
+    }
+  },
+  methods: {
+    isInteger (value) {
+      return typeof value === 'number' &&
+        isFinite(value) &&
+        Math.floor(value) === value
+    },
+    isValid (page) {
+      return this.isInteger(page) && page >= 1 && page !== this.stateCurrent
+    },
+    calculatePage (p) {
+      let pageSize = p
+      if (typeof pageSize === 'undefined') {
+        pageSize = this.pageSize
+      }
+      return Math.floor((this.total - 1) / pageSize) + 1
+    },
+    handleGoTO (event) {
+      if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
+        this.handleChange(this.stateCurrent)
+      }
+    },
+    prev () {
+      if (this.hasPrev()) {
+        this.handleChange(this.stateCurrent - 1)
+      }
+    },
+    next () {
+      if (this.hasNext()) {
+        this.handleChange(this.stateCurrent + 1)
+      }
+    },
+    hasPrev () {
+      return this.stateCurrent > 1
+    },
+    hasNext () {
+      return this.stateCurrent < this.calculatePage()
+    },
+    handleKeyDown (event) {
+      if (event.keyCode === KEYCODE.ARROW_UP || event.keyCode === KEYCODE.ARROW_DOWN) {
+        event.preventDefault()
+      }
+    },
+    handleKeyUp (event) {
+      const inputValue = event.target.value
+      const stateCurrent = this.stateCurrent
+      let value
+
+      if (inputValue === '') {
+        value = inputValue
+      } else if (isNaN(Number(inputValue))) {
+        value = stateCurrent
+      } else {
+        value = Number(inputValue)
+      }
+      event.target.value = value
+
+      if (event.keyCode === KEYCODE.ENTER) {
+        this.handleChange(value)
+      } else if (event.keyCode === KEYCODE.ARROW_UP) {
+        this.handleChange(value - 1)
+      } else if (event.keyCode === KEYCODE.ARROW_DOWN) {
+        this.handleChange(value + 1)
+      }
+    },
+    handleChange (p) {
+      let page = p
+      if (this.isValid(page)) {
+        const allTotal = this.calculatePage()
+        if (page > allTotal) {
+          page = allTotal
+        }
+        this.stateCurrent = page
+        this.$emit('input', page)
+        this.$emit('onChange', page, this.pageSize)
+        return page
+      }
+      return this.stateCurrent
+    },
+    runIfEnter (event, callback, ...restParams) {
+      if (event.key === 'Enter' || event.charCode === 13) {
+        callback(...restParams)
+      }
+    },
+    runIfEnterPrev (event) {
+      this.runIfEnter(event, this.prev)
+    },
+    runIfEnterNext (event) {
+      this.runIfEnter(event, this.next)
+    },
+    runIfEnterJumpPrev (event) {
+      this.runIfEnter(event, this.jumpPrev)
+    },
+    runIfEnterJumpNext (event) {
+      this.runIfEnter(event, this.jumpNext)
+    },
+    getJumpPrevPage () {
+      return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
+    },
+    getJumpNextPage () {
+      return Math.min(this.calculatePage(), this.stateCurrent + (this.showLessItems ? 3 : 5))
+    },
+    jumpPrev () {
+      this.handleChange(this.getJumpPrevPage())
+    },
+    jumpNext () {
+      this.handleChange(this.getJumpNextPage())
+    },
+  },
+  watch: {
+    current (val) {
+      this.stateCurrent = val
+    },
+  },
+  components: {
+    vcButton: Button,
+    Pager,
+  },
+  render () {
+    const prefixCls = this.prefixCls
+    const allPages = this.calculatePage()
+    const pagerList = []
+    let jumpPrev = null
+    let jumpNext = null
+    let firstPager = null
+    let lastPager = null
+    let gotoButton = null
+
+    const goButton = this.showQuickJumper
+    const pageBufferSize = this.showLessItems ? 1 : 2
+    const { stateCurrent, pageSize } = this
+
+    if (this.simple) {
+      if (goButton) {
+        if (typeof goButton === 'boolean') {
+          gotoButton = (
+            <li
+              title={this.showTitle ? `${locale.jump_to}${stateCurrent}/${allPages}` : null}
+              class={`${prefixCls}-simple-pager`}
+            >
+              <vc-button
+                onClick={this.handleGoTO}
+                onKeyup={this.handleGoTO}
+              >
+                {locale.jump_to_confirm}
+              </vc-button>
+            </li>
+          )
+        } else {
+          gotoButton = goButton
+        }
+      }
+      return (
+        <ul class={`${prefixCls} ${prefixCls}-simple`}>
+          <li
+            title={this.showTitle ? locale.prev_page : null}
+            onClick={this.prev}
+            tabIndex='0'
+            onKeypress={this.runIfEnterPrev}
+            class={`${this.hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+            aria-disabled={!this.hasPrev()}
+          >
+            <a class={`${prefixCls}-item-link`} />
+          </li>
+          <li
+            title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
+            class={`${prefixCls}-simple-pager`}
+          >
+            <input
+              type='text'
+              value={this.stateCurrent}
+              onKeydown={this.handleKeyDown}
+              onKeyup={this.handleKeyUp}
+              onChange={this.handleKeyUp}
+              size='3'
+            />
+            <span class={`${prefixCls}-slash`}>／</span>
+            {allPages}
+          </li>
+          <li
+            title={this.showTitle ? locale.next_page : null}
+            onClick={this.next}
+            tabIndex='0'
+            onKeypress={this.runIfEnterNext}
+            class={`${this.hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+            aria-disabled={!this.hasNext()}
+          >
+            <a class={`${prefixCls}-item-link`} />
+          </li>
+          {gotoButton}
+        </ul>
+      )
+    }
+
+    if (allPages <= 5 + pageBufferSize * 2) {
+      for (let i = 1; i <= allPages; i++) {
+        const active = stateCurrent === i
+        pagerList.push(
+          <Pager
+            rootPrefixCls={this.prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={i}
+            page={i}
+            active={active}
+            showTitle={this.showTitle}
+          />
+        )
+      }
+    } else {
+      const prevItemTitle = this.showLessItems ? locale.prev_3 : locale.prev_5
+      const nextItemTitle = this.showLessItems ? locale.next_3 : locale.next_5
+      jumpPrev = (
+        <li
+          title={this.showTitle ? prevItemTitle : null}
+          key='prev'
+          onClick={this.jumpPrev}
+          tabIndex='0'
+          onKeypress={this.runIfEnterJumpPrev}
+          class={`${prefixCls}-jump-prev`}
+        >
+          <a class={`${prefixCls}-item-link`} />
+        </li>
+      )
+      jumpNext = (
+        <li
+          title={this.showTitle ? nextItemTitle : null}
+          key='next'
+          tabIndex='0'
+          onClick={this.jumpNext}
+          onKeypress={this.runIfEnterJumpNext}
+          class={`${prefixCls}-jump-next`}
+        >
+          <a class={`${prefixCls}-item-link`} />
+        </li>
+      )
+      lastPager = (
+        <Pager
+          rootPrefixCls={prefixCls}
+          onClick={this.handleChange}
+          onKeypress={this.runIfEnter}
+          key={allPages}
+          page={allPages}
+          active={false}
+          showTitle={this.showTitle}
+        />
+      )
+      firstPager = (
+        <Pager
+          rootPrefixCls={prefixCls}
+          onClick={this.handleChange}
+          onKeypress={this.runIfEnter}
+          key={1}
+          page={1}
+          active={false}
+          showTitle={this.showTitle}
+        />
+      )
+
+      let left = Math.max(1, stateCurrent - pageBufferSize)
+      let right = Math.min(stateCurrent + pageBufferSize, allPages)
+
+      if (stateCurrent - 1 <= pageBufferSize) {
+        right = 1 + pageBufferSize * 2
+      }
+
+      if (allPages - stateCurrent <= pageBufferSize) {
+        left = allPages - pageBufferSize * 2
+      }
+
+      for (let i = left; i <= right; i++) {
+        const active = stateCurrent === i
+        pagerList.push(
+          <Pager
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={i}
+            page={i}
+            active={active}
+            showTitle={this.showTitle}
+          />
+        )
+      }
+
+      if (stateCurrent - 1 >= pageBufferSize * 2 && stateCurrent !== 1 + 2) {
+        pagerList[0] = (
+          <Pager
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={left}
+            page={left}
+            className={`${prefixCls}-item-after-jump-prev`}
+            active={false}
+            showTitle={this.showTitle}
+          />
+        )
+        pagerList.unshift(jumpPrev)
+      }
+      if (allPages - stateCurrent >= pageBufferSize * 2 && stateCurrent !== allPages - 2) {
+        pagerList[pagerList.length - 1] = (
+          <Pager
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={right}
+            page={right}
+            className={`${prefixCls}-item-before-jump-next`}
+            active={false}
+            showTitle={this.showTitle}
+          />
+        )
+        pagerList.push(jumpNext)
+      }
+
+      if (left !== 1) {
+        pagerList.unshift(firstPager)
+      }
+      if (right !== allPages) {
+        pagerList.push(lastPager)
+      }
+    }
+
+    let totalText = null
+
+    if (this.showTotal) {
+      totalText = (
+        <li class={`${prefixCls}-total-text`}>
+          {this.showTotal(
+            this.total,
+            [
+              (stateCurrent - 1) * pageSize + 1,
+              stateCurrent * pageSize > this.total ? this.total : stateCurrent * pageSize,
+            ]
+          )}
+        </li>
+      )
+    }
+    const prevDisabled = !this.hasPrev()
+    const nextDisabled = !this.hasNext()
+    return (
+      <ul
+        class={`${prefixCls} ${this.className}`}
+        unselectable='unselectable'
+      >
+        {totalText}
+        <li
+          title={this.showTitle ? locale.prev_page : null}
+          onClick={this.prev}
+          tabIndex='0'
+          onKeypress={this.runIfEnterPrev}
+          class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+          aria-disabled={prevDisabled}
+        >
+          <a class={`${prefixCls}-item-link`} />
+        </li>
+        {pagerList}
+        <li
+          title={this.showTitle ? locale.next_page : null}
+          onClick={this.next}
+          tabIndex='0'
+          onKeypress={this.runIfEnterNext}
+          class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+          aria-disabled={nextDisabled}
+        >
+          <a class={`${prefixCls}-item-link`} />
+        </li>
+      </ul>
+    )
+  },
+}
+</script>
diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
index 5b8e0ddab..58eeb2833 100644
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@@ -1,6 +1,5 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
-@import "../../input/style/mixin";
 
 @pagination-prefix-cls: ~"@{ant-prefix}-pagination";
 
@@ -222,11 +221,8 @@
 
     &-quick-jumper {
       display: inline-block;
-      height: @input-height-base;
-      line-height: @input-height-base;
 
       input {
-        .input;
         margin: 0 8px;
         width: 50px;
       }
@@ -316,7 +312,6 @@
       line-height: 20px;
 
       input {
-        .input-sm;
         width: 44px;
       }
     }
diff --git a/components/radio/Group.vue b/components/radio/Group.vue
index 0eba0f5ee..85c1a7f70 100644
--- a/components/radio/Group.vue
+++ b/components/radio/Group.vue
@@ -1,8 +1,8 @@
 <template>
-  <div :class="`${prefixCls}`">
-    <Radio v-for="item in options" :key="item.value" :checked="item.value === stateValue"
-      :value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Radio>
-    <slot v-if="options.length === 0"></slot>
+  <div :class="classes">
+    <Radio v-for="item in radioOptions" :key="item.value"
+      :value="item.value" :disabled="item.disabled" :name="name">{{item.label}}</Radio>
+    <slot v-if="radioOptions.length === 0"></slot>
   </div>
 </template>
 <script>
@@ -32,6 +32,8 @@ export default {
       default: () => [],
       type: Array,
     },
+    disabled: Boolean,
+    name: String,
   },
   data () {
     const { value, defaultValue } = this
@@ -42,17 +44,30 @@ export default {
   model: {
     prop: 'value',
   },
-  computed: {
-
+  provide () {
+    return {
+      radioGroupContext: this,
+    }
   },
-  created () {
-    this.setChildRadio(this.$slots.default)
+  computed: {
+    radioOptions () {
+      const { disabled } = this
+      return this.options.map(option => {
+        return typeof option === 'string'
+          ? { label: option, value: option }
+          : { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }
+      })
+    },
+    classes () {
+      const { prefixCls, size } = this
+      return {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-${size}`]: size,
+      }
+    },
   },
   methods: {
     handleChange (event) {
-      if (this.disabled) {
-        return false
-      }
       const target = event.target
       const { value: targetValue } = target
       if (this.value === undefined) {
@@ -61,29 +76,10 @@ export default {
       this.$emit('input', targetValue)
       this.$emit('change', event)
     },
-    setChildRadio (children = []) {
-      const { options, $slots, stateValue } = this
-      if (options.length === 0 && $slots.default) {
-        children.forEach(({ componentOptions = {}, children: newChildren }) => {
-          const { Ctor, propsData } = componentOptions
-          if (Ctor && Ctor.options.name === 'Radio') {
-            propsData.isGroup = true
-            propsData.onGroupChange = this.handleChange
-            propsData.checked = propsData.value === stateValue
-          } else {
-            this.setChildRadio(newChildren)
-          }
-        }, this)
-      }
-    },
-  },
-  beforeUpdate () {
-    this.setChildRadio(this.$slots.default)
   },
   watch: {
     value (val) {
       this.stateValue = val
-      this.setChildRadio(this.$slots.default)
     },
   },
   components: {
diff --git a/components/radio/Radio.vue b/components/radio/Radio.vue
index aad591c37..2170c62fb 100644
--- a/components/radio/Radio.vue
+++ b/components/radio/Radio.vue
@@ -26,15 +26,23 @@ export default {
     isGroup: Boolean,
     value: [String, Number, Boolean],
     name: String,
-    onGroupChange: Function,
   },
   model: {
     prop: 'checked',
   },
+  inject: {
+    radioGroupContext: { default: undefined },
+  },
   data () {
-    const { checked, defaultChecked } = this
+    const { radioGroupContext, checked, defaultChecked, value } = this
+    let stateChecked
+    if (radioGroupContext && radioGroupContext.stateValue) {
+      stateChecked = radioGroupContext.stateValue === value
+    }
     return {
-      stateChecked: checked === undefined ? defaultChecked : checked,
+      stateChecked: stateChecked === undefined
+        ? checked === undefined ? defaultChecked : checked
+        : stateChecked,
     }
   },
   computed: {
@@ -61,27 +69,28 @@ export default {
   methods: {
     handleChange (event) {
       const targetChecked = event.target.checked
-      const { name, value, checked } = this
-      if (checked === undefined) {
+      this.$emit('input', targetChecked)
+      const { name, value, checked, radioGroupContext, stateChecked } = this
+      if ((checked === undefined && !radioGroupContext) || (radioGroupContext && radioGroupContext.value === undefined)) {
         this.stateChecked = targetChecked
       }
-      this.$emit('input', targetChecked)
       const target = {
         name,
         value,
-        checked: targetChecked,
+        checked: !stateChecked,
       }
-      this.$emit('change', {
-        target,
-        stopPropagation () {
-          event.stopPropagation()
-        },
-        preventDefault () {
-          event.preventDefault()
-        },
-      })
-      if (this.isGroup) {
-        this.onGroupChange({ target })
+      if (this.radioGroupContext) {
+        this.radioGroupContext.handleChange({ target })
+      } else {
+        this.$emit('change', {
+          target,
+          stopPropagation () {
+            event.stopPropagation()
+          },
+          preventDefault () {
+            event.preventDefault()
+          },
+        })
       }
     },
   },
@@ -89,6 +98,9 @@ export default {
     checked (val) {
       this.stateChecked = val
     },
+    'radioGroupContext.stateValue': function (stateValue) {
+      this.stateChecked = stateValue === this.value
+    },
   },
 }
 </script>
diff --git a/components/radio/demo/basic.vue b/components/radio/demo/basic.vue
new file mode 100644
index 000000000..02c275f0c
--- /dev/null
+++ b/components/radio/demo/basic.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <Radio>Radio</Radio>
+  </div>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  components: {
+    Radio,
+  },
+}
+</script>
diff --git a/components/radio/demo/disabled.vue b/components/radio/demo/disabled.vue
new file mode 100644
index 000000000..d21f027ac
--- /dev/null
+++ b/components/radio/demo/disabled.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <Radio :defaultChecked="false" :disabled="disabled">Disabled</Radio>
+    <br />
+    <Radio defaultChecked :disabled="disabled">Disabled</Radio>
+    <div :style="{ marginTop: 20 }">
+      <AntButton type="primary" @click="toggleDisabled">
+        Toggle disabled
+      </AntButton>
+    </div>
+  </div>
+</template>
+<script>
+import { Radio, Button } from 'antd'
+export default {
+  data () {
+    return {
+      disabled: true,
+    }
+  },
+  methods: {
+    toggleDisabled () {
+      this.disabled = !this.disabled
+    },
+  },
+  components: {
+    Radio,
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/radio/demo/index.vue b/components/radio/demo/index.vue
new file mode 100644
index 000000000..cf711bade
--- /dev/null
+++ b/components/radio/demo/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h1>Basic</h1>
+    <Basic />
+    <h1>Disabled</h1>
+    <Disabled />
+    <h1>RadioButton</h1>
+    <RadioButton />
+    <h1>RadioGroupMore</h1>
+    <RadioGroupMore />
+    <h1>RadioGroupOptions</h1>
+    <RadioGroupOptions />
+    <h1>RadioGroupWithName</h1>
+    <RadioGroupWithName />
+    <h1>RadioGroup</h1>
+    <RadioGroup />
+    <h1>Size</h1>
+    <Size />
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import Disabled from './disabled'
+import RadioButton from './radioButton'
+import RadioGroupMore from './radioGroup-more'
+import RadioGroupOptions from './radioGroup-options'
+import RadioGroupWithName from './radioGroup-with-name'
+import RadioGroup from './radioGroup'
+import Size from './size'
+export default {
+  components: {
+    Basic,
+    Disabled,
+    RadioButton,
+    RadioGroupMore,
+    RadioGroupOptions,
+    RadioGroupWithName,
+    RadioGroup,
+    Size,
+  },
+}
+</script>
diff --git a/components/radio/demo/radioButton.vue b/components/radio/demo/radioButton.vue
new file mode 100644
index 000000000..3ee413418
--- /dev/null
+++ b/components/radio/demo/radioButton.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div>
+      <RadioGroup @change="onChange" defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div :style="{ marginTop: 16 }">
+      <RadioGroup @change="onChange" defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b" disabled>Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div :style="{ marginTop: 16 }">
+      <RadioGroup disabled @change="onChange" defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+  </div>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  methods: {
+    onChange (e) {
+      console.log(`checked = ${e.target.value}`)
+    },
+  },
+  components: {
+    RadioButton: Radio.Button,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>
diff --git a/components/radio/demo/radioGroup-more.vue b/components/radio/demo/radioGroup-more.vue
new file mode 100644
index 000000000..6ade73275
--- /dev/null
+++ b/components/radio/demo/radioGroup-more.vue
@@ -0,0 +1,35 @@
+<template>
+  <RadioGroup @change="onChange" v-model="value">
+    <Radio :style="radioStyle" :value="1">Option A</Radio>
+    <Radio :style="radioStyle" :value="2">Option B</Radio>
+    <Radio :style="radioStyle" :value="3">Option C</Radio>
+    <Radio :style="radioStyle" :value="4">
+      More...
+      <Input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
+    </Radio>
+  </RadioGroup>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  data () {
+    return {
+      value: 1,
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px',
+      },
+    }
+  },
+  methods: {
+    onChange (e) {
+      console.log('radio checked', e.target.value)
+    },
+  },
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>
diff --git a/components/radio/demo/radioGroup-options.vue b/components/radio/demo/radioGroup-options.vue
new file mode 100644
index 000000000..6d5f55f14
--- /dev/null
+++ b/components/radio/demo/radioGroup-options.vue
@@ -0,0 +1,50 @@
+<template>
+<div>
+  <RadioGroup :options="plainOptions" @change="onChange1" :defaultValue="value1" />
+  <br />
+  <RadioGroup :options="options" @change="onChange2" v-model="value2" />
+  <br />
+  <RadioGroup :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
+</div>
+</template>
+<script>
+import { Radio } from 'antd'
+const plainOptions = ['Apple', 'Pear', 'Orange']
+const options = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange' },
+]
+const optionsWithDisabled = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange', disabled: false },
+]
+export default {
+  data () {
+    return {
+      plainOptions,
+      options,
+      optionsWithDisabled,
+      value1: 'Apple',
+      value2: 'Apple',
+      value3: 'Apple',
+    }
+  },
+  methods: {
+    onChange1 (e) {
+      console.log('radio1 checked', e.target.value)
+    },
+    onChange2 (e) {
+      console.log('radio2 checked', e.target.value)
+    },
+    onChange3 (e) {
+      console.log('radio3 checked', e.target.value)
+    },
+  },
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>
diff --git a/components/radio/demo/radioGroup-with-name.vue b/components/radio/demo/radioGroup-with-name.vue
new file mode 100644
index 000000000..ab272d8f7
--- /dev/null
+++ b/components/radio/demo/radioGroup-with-name.vue
@@ -0,0 +1,17 @@
+<template>
+  <RadioGroup name="radioGroup" :defaultValue="1">
+    <Radio :value="1">A</Radio>
+    <Radio :value="2">B</Radio>
+    <Radio :value="3">C</Radio>
+    <Radio :value="4">D</Radio>
+  </RadioGroup>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>
diff --git a/components/radio/demo/radioGroup.vue b/components/radio/demo/radioGroup.vue
new file mode 100644
index 000000000..085211370
--- /dev/null
+++ b/components/radio/demo/radioGroup.vue
@@ -0,0 +1,27 @@
+<template>
+  <RadioGroup @change="onChange" v-model="value">
+    <Radio :value="1">A</Radio>
+    <Radio :value="2">B</Radio>
+    <Radio :value="3">C</Radio>
+    <Radio :value="4">D</Radio>
+  </RadioGroup>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  data () {
+    return {
+      value: 1,
+    }
+  },
+  methods: {
+    onChange (e) {
+      console.log('radio checked', e.target.value)
+    },
+  },
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>
diff --git a/components/radio/demo/size.vue b/components/radio/demo/size.vue
new file mode 100644
index 000000000..2739cc763
--- /dev/null
+++ b/components/radio/demo/size.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div>
+      <RadioGroup defaultValue="a" size="large">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div :style="{ marginTop: 16 }">
+      <RadioGroup defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div :style="{ marginTop: 16 }">
+      <RadioGroup defaultValue="a" size="small">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+  </div>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  components: {
+    RadioButton: Radio.Button,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index b0e17ff46..97065950d 100644
--- a/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -9,7 +9,7 @@ export default {
     },
     placement: {
       default: 'top',
-      validator: val => ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'].includes(val)
+      validator: val => ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'].includes(val),
     },
     transitionName: {
       default: 'zoom-big-fast',
@@ -47,8 +47,8 @@ export default {
     },
   },
   methods: {
-    checkPosition(popup, text, placement) {
-      let { top, left, bottom, right } = text
+    checkPosition (popup, text, placement) {
+      const { top, left, bottom, right } = text
       const reg = /(top|bottom|left|right)(.*)/
       const [, abstractPos, suffix] = placement.match(reg)
       let ret = placement
@@ -59,7 +59,7 @@ export default {
       if (abstractPos === 'bottom' && document.documentElement.clientHeight - bottom < popup.height) ret = 'left' + suffix
       return ret
     },
-    mountNode(callback) {
+    mountNode (callback) {
       if (this.vnode) {
         callback()
         return
@@ -68,14 +68,14 @@ export default {
       document.body.appendChild(div)
       const that = this
       const vnode = new Vue({
-        data() {
+        data () {
           return {
             left: 0,
             top: 0,
           }
         },
         methods: {
-          hideSelf(e) {
+          hideSelf (e) {
             if (that.t1) {
               clearTimeout(that.t1)
               that.t1 = null
@@ -88,9 +88,9 @@ export default {
                 that.visible = false
               }, +that.mouseLeaveDelay * 1e3)
             }
-          }
+          },
         },
-        render(h) {
+        render (h) {
           return (
             <transition name={that.transitionName}>
               <div
@@ -99,16 +99,16 @@ export default {
                 style={{ left: this.left + 'px', top: this.top + 'px' }}
                 onMouseleave={this.hideSelf}
               >
-                <div class="ant-tooltip-content">
-                  <div class="ant-tooltip-arrow"/>
-                  <div class="ant-tooltip-inner">
+                <div class='ant-tooltip-content'>
+                  <div class='ant-tooltip-arrow'/>
+                  <div class='ant-tooltip-inner'>
                     <span>{that.title}</span>
                   </div>
                 </div>
               </div>
             </transition>
           )
-        }
+        },
       }).$mount(div)
       this.$nextTick(() => {
         this.vnode = vnode
@@ -137,7 +137,7 @@ export default {
       }
       target.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`
     },
-    addEventHandle(old, fn) {
+    addEventHandle (old, fn) {
       if (!old) {
         return fn
       } else if (Array.isArray(old)) {
@@ -146,7 +146,7 @@ export default {
         return old === fn ? old : [old, fn]
       }
     },
-    computeOffset(popup, text, placement, scale) {
+    computeOffset (popup, text, placement, scale) {
       let { width, height, top, left } = text
       //  you cant change the properties of DOMRect
       top += window.scrollY
@@ -163,23 +163,23 @@ export default {
       // FIXME: magic number 20 & 14 comes from the offset of triangle
       if (/Left/.test(placement)) {
         if (this.arrowPointAtCenter) ret.left += width / 2 - 20
-      } else if(/Right/.test(placement)) {
+      } else if (/Right/.test(placement)) {
         ret.left += (width - p.width)
         if (this.arrowPointAtCenter) ret.left -= width / 2 - 20
-      } else if(/(top)|(bottom)/.test(placement)) {
+      } else if (/(top)|(bottom)/.test(placement)) {
         ret.left += (width - p.width) / 2
       }
       if (/Top/.test(placement)) {
         if (this.arrowPointAtCenter) ret.top += height / 2 - 14
-      } else if(/Bottom/.test(placement)) {
+      } else if (/Bottom/.test(placement)) {
         ret.top += (height - p.height)
         if (this.arrowPointAtCenter) ret.top -= height / 2 - 14
-      } else if(/(left)|(right)/.test(placement)) {
+      } else if (/(left)|(right)/.test(placement)) {
         ret.top += (height - p.height) / 2
       }
       return ret
     },
-    showNode() {
+    showNode () {
       this.mountNode(() => {
         this.visible = true
         this.$nextTick(() => {
@@ -192,17 +192,17 @@ export default {
           this.vnode.left = left
           this.vnode.top = top
         })
-        this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0,0] })
+        this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0, 0] })
       })
     },
-    hideNode(e) {
+    hideNode (e) {
       if (!this.vnode) return
       if (e.relatedTarget === this.vnode.$el) {
         return
       }
       this.visible = false
     },
-    checkShow(e) {
+    checkShow (e) {
       if (this.t2) {
         clearTimeout(this.t2)
         this.t2 = null
@@ -213,7 +213,7 @@ export default {
         }, +this.mouseEnterDelay * 1e3)
       }
     },
-    checkHide(e) {
+    checkHide (e) {
       if (this.t1) {
         clearTimeout(this.t1)
         this.t1 = null
@@ -223,9 +223,9 @@ export default {
           this.hideNode(e)
         }, +this.mouseLeaveDelay * 1e3)
       }
-    }
+    },
   },
-  render(h) {
+  render (h) {
     const inner = this.$slots.default[0]
     inner.data = inner.data || {}
     inner.data.on = inner.data.on || {}
@@ -234,7 +234,7 @@ export default {
 
     return this.$slots.default[0]
   },
-  updated() {
+  updated () {
     if (!this.vnode) return
     const popup = this.vnode.$el.getBoundingClientRect()
     const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
@@ -243,10 +243,10 @@ export default {
     this.vnode.left = left
     this.vnode.top = top
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (!this.vnode) return
     this.vnode.$el.remove()
     this.vnode.$destroy()
-  }
+  },
 }
 </script>