diff --git a/components/index.js b/components/index.js
index e3650b104..92e252232 100644
--- a/components/index.js
+++ b/components/index.js
@@ -146,3 +146,5 @@ export { default as Progress } from './progress'
 import Timeline from './timeline'
 const TimelineItem = Timeline.Item
 export { Timeline, TimelineItem }
+
+export { default as InputNumber } from './input-number'
diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md
new file mode 100644
index 000000000..3e92744b0
--- /dev/null
+++ b/components/input-number/demo/basic.md
@@ -0,0 +1,35 @@
+<cn>
+#### 基本
+数字输入框。
+</cn>
+
+<us>
+#### Basic
+Numeric-only input box.
+</us>
+
+```html
+<template>
+  <div>
+    <a-input-number :min="1" :max="10" v-model="value" @change="onChange" />
+    当前值：{{value}}
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        value: 3
+      }
+    },
+    methods: {
+      onChange(value) {
+        console.log('changed', value);
+      },
+    },
+  }
+</script>
+```
+
+
+
diff --git a/components/input-number/demo/digit.md b/components/input-number/demo/digit.md
new file mode 100644
index 000000000..8a501cca8
--- /dev/null
+++ b/components/input-number/demo/digit.md
@@ -0,0 +1,28 @@
+<cn>
+#### 小数
+和原生的数字输入框一样，value 的精度由 step 的小数位数决定。
+</cn>
+
+<us>
+#### Decimals
+A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop.
+</us>
+
+```html
+<template>
+  <a-input-number :min="0" :max="10" :step="0.1" @change="onChange" />
+</template>
+<script>
+  export default {
+    methods: {
+      onChange(value) {
+        console.log('changed', value);
+      },
+    },
+  }
+</script>
+```
+
+
+
+
diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md
new file mode 100644
index 000000000..00ddd303c
--- /dev/null
+++ b/components/input-number/demo/disabled.md
@@ -0,0 +1,37 @@
+<cn>
+#### 不可用
+点击按钮切换可用状态。
+</cn>
+
+<us>
+#### Disabled
+Click the button to toggle between available and disabled states.
+</us>
+
+```html
+<template>
+  <div>
+    <a-input-number :min="1" :max="10" :disabled="disabled" :defaultValue="3" />
+    <div style="marginTop:20px">
+      <a-button @click="toggle" type="primary">Toggle disabled</a-button>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        disabled: true,
+      }
+    },
+    methods: {
+      toggle() {
+        this.disabled = !this.disabled
+      }
+    },
+  }
+</script>
+```
+
+
+
diff --git a/components/input-number/demo/formatter.md b/components/input-number/demo/formatter.md
new file mode 100644
index 000000000..a4f7a2736
--- /dev/null
+++ b/components/input-number/demo/formatter.md
@@ -0,0 +1,42 @@
+<cn>
+#### 格式化展示
+通过 `formatter` 格式化数字，以展示具有具体含义的数据，往往需要配合 `parser` 一起使用。
+</cn>
+
+<us>
+#### Formatter
+Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
+</us>
+
+```html
+<template>
+  <div>
+    <a-input-number
+      :defaultValue="1000"
+      :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
+      @change="onChange"
+    />
+    <a-input-number
+      :defaultValue="100"
+      :min="0"
+      :max="100"
+      :formatter="value => `${value}%`"
+      :parser="value => value.replace('%', '')"
+      @change="onChange"
+    />
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      onChange(value) {
+        console.log('changed', value);
+      },
+    },
+  }
+</script>
+```
+
+
+
diff --git a/components/input-number/demo/index.vue b/components/input-number/demo/index.vue
new file mode 100644
index 000000000..8f5ff5519
--- /dev/null
+++ b/components/input-number/demo/index.vue
@@ -0,0 +1,53 @@
+<script>
+import Basic from './basic.md'
+import Disabled from './disabled.md'
+import Digit from './digit.md'
+import Formatter from './formatter.md'
+import Size from './size.md'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# 数字输入框
+  通过鼠标或键盘，输入范围内的数值。
+  ## 何时使用
+  当需要获取标准数值时。
+        ## 代码演示`,
+  us: `# Data Entry
+  Enter a number within certain range with the mouse or keyboard.
+  ## When To Use
+  When a numeric value needs to be provided.
+  ## Examples
+  `,
+}
+export default {
+  category: 'Components',
+  subtitle: '数字输入框',
+  type: 'Data Entry',
+  title: 'InputNumber',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <br/>
+        <Basic />
+        <br/>
+        <Size />
+        <br />
+        <Disabled />
+        <br/>
+        <Digit />
+        <br/>
+        <Formatter />
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md
new file mode 100644
index 000000000..5e66d5f76
--- /dev/null
+++ b/components/input-number/demo/size.md
@@ -0,0 +1,36 @@
+<cn>
+#### 三种大小
+三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `40px` 和 `24px` ，默认高度为 `32px`。
+</cn>
+
+<us>
+#### Sizes
+There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
+</us>
+
+```html
+<template>
+  <div>
+    <a-input-number size="large" :min="1" :max="100000" :defaultValue="3" @change="onChange" />
+    <a-input-number :min="1" :max="100000" :defaultValue="3" @change="onChange" />
+    <a-input-number size="small" :min="1" :max="100000" :defaultValue="3" @change="onChange" />
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      onChange(value) {
+        console.log('changed', value);
+      },
+    },
+  }
+</script>
+<style scoped>
+  .ant-input-number {
+    margin-right: 10px;
+  }
+</style>
+```
+
+
+
diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md
new file mode 100644
index 000000000..5d0e71229
--- /dev/null
+++ b/components/input-number/index.en-US.md
@@ -0,0 +1,28 @@
+## API
+
+| property | description | type | default |
+| -------- | ----------- | ---- | ------- |
+| autoFocus | get focus when component mounted | boolean | false |
+| defaultValue | initial value | number |  |
+| disabled | disable the input | boolean | false |
+| formatter | Specifies the format of the value presented | function(value: number \| string): string | - |
+| max | max vale | number | Infinity |
+| min | min value | number | -Infinity |
+| parser | Specifies the value extracted from formatter | function( string): number | - |
+| precision | precision of input value | number | - |
+| size | width of input box | string | - |
+| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
+| value(v-model) | current value | number |  |
+
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| change | The callback triggered when the value is changed. | function(value: number \| string) |  |
+
+## Methods
+
+| Name | Description |
+| ---- | ----------- |
+| blur() | remove focus |
+| focus() | get focus |
diff --git a/components/input-number/index.jsx b/components/input-number/index.jsx
new file mode 100644
index 000000000..902ea2b77
--- /dev/null
+++ b/components/input-number/index.jsx
@@ -0,0 +1,62 @@
+import PropTypes from '../_util/vue-types'
+import { initDefaultProps, getOptionProps } from '../_util/props-util'
+import classNames from 'classnames'
+import VcInputNumber from '../vc-input-number/src'
+
+export const InputNumberProps = {
+  prefixCls: PropTypes.string,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
+  step: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
+  defaultValue: PropTypes.number,
+  tabIndex: PropTypes.number,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['large', 'small', 'default']),
+  formatter: PropTypes.func,
+  parser: PropTypes.func,
+  placeholder: PropTypes.string,
+  name: PropTypes.string,
+  id: PropTypes.string,
+  precision: PropTypes.number,
+}
+
+export default {
+  name: 'InputNumber',
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: initDefaultProps(InputNumberProps, {
+    prefixCls: 'ant-input-number',
+    step: 1,
+  }),
+  methods: {
+    focus () {
+      this.$refs.inputNumberRef.focus()
+    },
+    blur () {
+      this.$refs.inputNumberRef.blur()
+    },
+  },
+
+  render () {
+    const { size, ...others } = getOptionProps(this)
+    const inputNumberClass = classNames({
+      [`${this.prefixCls}-lg`]: size === 'large',
+      [`${this.prefixCls}-sm`]: size === 'small',
+    })
+    const vcInputNumberprops = {
+      props: {
+        ...others,
+      },
+      class: inputNumberClass,
+      ref: 'inputNumberRef',
+      on: this.$listeners,
+    }
+    return <VcInputNumber {...vcInputNumberprops} />
+  },
+}
diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
new file mode 100644
index 000000000..25c5949cb
--- /dev/null
+++ b/components/input-number/index.zh-CN.md
@@ -0,0 +1,29 @@
+## API
+
+属性如下
+
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false |
+| defaultValue | 初始值 | number |  |
+| disabled | 禁用 | boolean | false |
+| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - |
+| max | 最大值 | number | Infinity |
+| min | 最小值 | number | -Infinity |
+| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - |
+| precision | 数值精度 | number | - |
+| size | 输入框大小 | string | 无 |
+| step | 每次改变步数，可以为小数 | number\|string | 1 |
+| value(v-model) | 当前值 | number |  |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 变化回调 | Function(value: number \| string) |  |
+
+## 方法
+
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
+| focus() | 获取焦点 |
diff --git a/components/input-number/style/index.jsx b/components/input-number/style/index.jsx
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/input-number/style/index.jsx
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
new file mode 100644
index 000000000..f865df881
--- /dev/null
+++ b/components/input-number/style/index.less
@@ -0,0 +1,171 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
+@input-number-prefix-cls: ~"@{ant-prefix}-input-number";
+
+.@{input-number-prefix-cls} {
+  .reset-component;
+  .input;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  border: @border-width-base @border-style-base @border-color-base;
+  border-radius: @border-radius-base;
+  width: 90px;
+
+  &-handler {
+    text-align: center;
+    line-height: 0;
+    height: 50%;
+    overflow: hidden;
+    color: @text-color-secondary;
+    position: relative;
+    transition: all 0.1s linear;
+    display: block;
+    width: 100%;
+    font-weight: bold;
+    &:active {
+      background: #f4f4f4;
+    }
+    &:hover &-up-inner,
+    &:hover &-down-inner {
+      color: @primary-5;
+    }
+  }
+
+  &-handler-up-inner,
+  &-handler-down-inner {
+    .iconfont-mixin();
+    line-height: 12px;
+    user-select: none;
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    transition: all 0.1s linear;
+    .iconfont-size-under-12px(7px);
+    right: 4px;
+    color: @text-color-secondary;
+  }
+
+  &:hover {
+    .hover();
+  }
+
+  &-focused {
+    .active();
+  }
+
+  &-disabled {
+    .disabled();
+    .@{input-number-prefix-cls}-input {
+      cursor: not-allowed;
+      background-color: @disabled-bg;
+    }
+    .@{input-number-prefix-cls}-handler-wrap {
+      display: none;
+    }
+  }
+
+  &-input {
+    width: 100%;
+    text-align: left;
+    outline: 0;
+    -moz-appearance: textfield;
+    height: @input-height-base - 2px;
+    transition: all 0.3s linear;
+    color: @input-color;
+    background-color: @input-bg;
+    border: 0;
+    border-radius: @border-radius-base;
+    padding: 0 @control-padding-horizontal - 1px;
+    display: block;
+    .placeholder();
+
+    &[disabled] {
+      .disabled();
+    }
+  }
+
+  &-lg {
+    padding: 0;
+    font-size: @font-size-lg;
+
+    input {
+      height: @input-height-lg - 2px;
+    }
+  }
+
+  &-sm {
+    padding: 0;
+
+    input {
+      height: @input-height-sm - 2px;
+      padding: 0 @control-padding-horizontal-sm - 1px;
+    }
+  }
+
+  &-handler-wrap {
+    border-left: @border-width-base @border-style-base @border-color-base;
+    width: 22px;
+    height: 100%;
+    background: @component-background;
+    position: absolute;
+    top: 0;
+    right: 0;
+    opacity: 0;
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+    transition: opacity 0.24s linear 0.1s;
+    z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
+  }
+
+  &-handler-wrap:hover &-handler {
+    height: 40%;
+  }
+
+  &:hover &-handler-wrap {
+    opacity: 1;
+  }
+
+  &-handler-up {
+    cursor: pointer;
+    &-inner {
+      top: 50%;
+      margin-top: -6px;
+      &:before {
+        text-align: center;
+        content: "\e61e";
+      }
+    }
+    &:hover {
+      height: 60% !important;
+    }
+  }
+
+  &-handler-down {
+    border-top: @border-width-base @border-style-base @border-color-base;
+    top: -1px;
+    cursor: pointer;
+    &-inner {
+      top: 50%;
+      margin-top: -6px;
+      &:before {
+        text-align: center;
+        content: "\e61d";
+      }
+    }
+    &:hover {
+      height: 60% !important;
+    }
+  }
+
+  &-handler-up-disabled,
+  &-handler-down-disabled {
+    cursor: not-allowed;
+  }
+
+  &-handler-up-disabled:hover &-handler-up-inner,
+  &-handler-down-disabled:hover &-handler-down-inner {
+    color: @disabled-color;
+  }
+}
diff --git a/components/slider/demo/index.vue b/components/slider/demo/index.vue
index 7d65ffaff..a04488de3 100644
--- a/components/slider/demo/index.vue
+++ b/components/slider/demo/index.vue
@@ -1,6 +1,6 @@
 <script>
 import Basic from './basic.md'
-// import InputNumber from './input-number.md'
+import InputNumber from './input-number.md'
 import IconSlider from './icon-slider.md'
 import TipFormatter from './tip-formatter.md'
 import Event from './event.md'
@@ -34,6 +34,8 @@ export default {
         <br/>
         <Basic />
         <br />
+        <InputNumber />
+        <br />
         <IconSlider />
         <br />
         <TipFormatter />
diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md
index 3a8e51c45..5522f72c5 100644
--- a/components/slider/demo/input-number.md
+++ b/components/slider/demo/input-number.md
@@ -15,28 +15,28 @@ Synchronize with [InptNumber](#/us/components/input-number/) component.
         <a-col :span="12">
           <a-slider :min="1" :max="20" v-model="inputValue1" />
         </a-col>
-        <!-- <a-col :span="4">
-          <a-inputNumber
+        <a-col :span="4">
+          <a-input-number
             :min="1"
             :max="20"
             style="marginLeft: 16px"
             v-model="inputValue1"
           />
-        </a-ol> -->
+        </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
           <a-slider :min="0" :max="1" v-model="inputValue" :step="0.01" />
         </a-col>
-        <!-- <a-col :span="4">
-          <a-inputNumber
+        <a-col :span="4">
+          <a-input-number
             :min="0"
             :max="1"
             :step="0.01"
             style="marginLeft: 16px"
             v-model="inputValue"
           />
-        </a-col> -->
+        </a-col>
       </a-row>
   </div>
 </template>
diff --git a/components/style.js b/components/style.js
index 5e3caafad..ffd2dec1b 100644
--- a/components/style.js
+++ b/components/style.js
@@ -38,3 +38,4 @@ import './slider/style'
 import './table/style'
 import './progress/style'
 import './timeline/style'
+import './input-number/style'
diff --git a/components/timeline/demo/index.vue b/components/timeline/demo/index.vue
index 494692085..9a04e0517 100644
--- a/components/timeline/demo/index.vue
+++ b/components/timeline/demo/index.vue
@@ -17,7 +17,7 @@ const md = {
         ## 代码演示`,
   us: `# Data Display
   Vertical display timeline.
-
+  ## When To Use
   - When a series of information needs to be ordered by time (ascend or descend).
   - When you need a timeline to make a visual connection.
   ## Examples
diff --git a/examples/demo.js b/examples/demo.js
index afd09b0e3..c032ecb56 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -39,3 +39,4 @@ export { default as slider } from 'antd/slider/demo/index.vue'
 export { default as progress } from 'antd/progress/demo/index.vue'
 export { default as timeline } from 'antd/timeline/demo/index.vue'
 export { default as table } from 'antd/table/demo/index.vue'
+export { default as inputNumber } from 'antd/input-number/demo/index.vue'
diff --git a/examples/routes.js b/examples/routes.js
index 3d6bac0a1..0d3dafd6f 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/vc-input-number/demo/${d}`),
+    component: import(`../components/input-number/demo/${d}`),
   }
 }
 export default [