diff --git a/.eslintignore b/.eslintignore
index f22f139..472d746 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,4 +2,6 @@
 public
 node_modules
 cache
-examples/assets
\ No newline at end of file
+examples/assets
+examples/views/docs
+release
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index f22f139..472d746 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,4 +2,6 @@
 public
 node_modules
 cache
-examples/assets
\ No newline at end of file
+examples/assets
+examples/views/docs
+release
\ No newline at end of file
diff --git a/examples/router/routes.js b/examples/router/routes.js
index 74d8031..ca4d66e 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -54,6 +54,12 @@ const _components = [
     group: '表单组件',
     children: [
       {
+        path: 'input',
+        name: 'input',
+        meta: { title: 'Input 输入框' },
+        component: () => import('@/views/docs/component/input.md'),
+      },
+      {
         path: 'checkbox',
         name: 'checkbox',
         meta: { title: 'Checkbox 复选框' },
diff --git a/examples/views/docs/component/input.md b/examples/views/docs/component/input.md
new file mode 100644
index 0000000..b263ed9
--- /dev/null
+++ b/examples/views/docs/component/input.md
@@ -0,0 +1,64 @@
+# Input 输入框
+
+输入框组件，支持特殊业务场景格式化
+
+## 基本用法
+
+配置`type`属性设置类型
+
+::: snippet 支持`text`, `bankCard`, `password`, `phone`, `money`, `digit`，默认为`text`
+
+```html
+<template>
+  <div>
+    <div class="input-field">
+      提交值：{{ model }}
+    </div>
+    <div class="input-field">
+      常规输入：<zui-input v-model="model" placeholder="常规输入" clearable />
+    </div>
+    <div class="input-field">
+      银行卡输入：<zui-input v-model="model" placeholder="银行卡输入" type="bankCard" />
+    </div>
+    <div class="input-field">
+      手机号输入：<zui-input v-model="model" placeholder="手机号输入" type="phone" />
+    </div>
+    <div class="input-field">
+      金额输入：<zui-input v-model="model" placeholder="金额输入" type="money" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: ''
+    }
+  }
+}
+</script>
+
+<style>
+.input-field {
+  padding: 10px;
+  border-bottom: 1px solid rgba(151, 151, 151, 0.1);
+}
+</style>
+```
+
+:::
+
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value | 值 | String,Number | - | ''
+placeholder | 值 | String,Number | - | ''
+type | 类型 | String | text,bankCard,password,phone,money,digit | text
+clearable | 是否可清除 | Boolean | - | false
+disabled | 是否禁用 | Boolean | - | false
+readonly | 是否只读 | Boolean | - | false
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index 5e6f245..16e486a 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <i class="zui-icon" :class="classRender" :style="styleRender" @click.stop="onClick">
+  <i class="zui-icon" :class="classRender" :style="styleRender">
     <div v-if="info || dot" class="zui-info" :class="{ dot: dot }">{{ info }}</div>
   </i>
 </template>
@@ -38,13 +38,6 @@ export default {
       };
     },
   },
-  methods: {
-    onClick: function () {
-      if (this.$listeners['click']) {
-        this.$emit('click');
-      }
-    },
-  },
 };
 </script>
 
diff --git a/packages/input/cursor.js b/packages/input/cursor.js
new file mode 100644
index 0000000..a0629f3
--- /dev/null
+++ b/packages/input/cursor.js
@@ -0,0 +1,50 @@
+/**
+ * get position of input cursor
+ */
+export function getCursorsPosition(ctrl) {
+  /* istanbul ignore if */
+  if (!ctrl) {
+    return 0;
+  }
+  let CaretPos = 0; // IE Support
+  /* istanbul ignore next */
+  if (document.selection) {
+    ctrl.focus();
+    const Sel = document.selection.createRange();
+    Sel.moveStart('character', -ctrl.value.length);
+    CaretPos = Sel.text.length;
+  } else if (ctrl.selectionStart || ctrl.selectionStart === '0') {
+    // Firefox support
+    CaretPos = ctrl.selectionStart;
+  }
+  return CaretPos;
+}
+
+let timer = null;
+/**
+ * set position of input cursor
+ */
+export function setCursorsPosition(ctrl, pos) {
+  /* istanbul ignore if */
+  if (!ctrl) {
+    return;
+  }
+  /* istanbul ignore if */
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  timer = setTimeout(() => {
+    /* istanbul ignore next */
+    if (ctrl.setSelectionRange) {
+      ctrl.focus();
+      ctrl.setSelectionRange(pos, pos);
+    } else if (ctrl.createTextRange) {
+      const range = ctrl.createTextRange();
+      range.collapse(true);
+      range.moveEnd('character', pos);
+      range.moveStart('character', pos);
+      range.select();
+    }
+  }, 50);
+}
diff --git a/packages/input/formate-value.js b/packages/input/formate-value.js
new file mode 100644
index 0000000..e94d90c
--- /dev/null
+++ b/packages/input/formate-value.js
@@ -0,0 +1,76 @@
+export function formatValueByGapRule(gapRule, value, gap = ' ', range, isAdd = 1) {
+  const arr = value ? value.split('') : [];
+  let showValue = '';
+  const rule = [];
+  gapRule.split('|').some((n, j) => {
+    rule[j] = +n + (rule[j - 1] ? +rule[j - 1] : 0);
+  });
+  let j = 0;
+  arr.some((n, i) => {
+    // Remove the excess part
+    if (i > rule[rule.length - 1] - 1) {
+      return;
+    }
+    if (i > 0 && i === rule[j]) {
+      showValue = showValue + gap + n;
+      j++;
+    } else {
+      showValue = showValue + '' + n;
+    }
+  });
+  let adapt = 0;
+  rule.some((n, j) => {
+    if (range === +n + 1 + j) {
+      adapt = 1 * isAdd;
+    }
+  });
+  range = typeof range !== 'undefined' ? (range === 0 ? 0 : range + adapt) : showValue.length;
+  return { value: showValue, range: range };
+}
+
+export function formatValueByGapStep(step, value, gap = ' ', direction = 'right', range, isAdd = 1, oldValue = '') {
+  if (value.length === 0) {
+    return { value, range };
+  }
+
+  const arr = value && value.split('');
+  let _range = range;
+  let showValue = '';
+
+  if (direction === 'right') {
+    for (let j = arr.length - 1, k = 0; j >= 0; j--, k++) {
+      const m = arr[j];
+      showValue = k > 0 && k % step === 0 ? m + gap + showValue : m + '' + showValue;
+    }
+    if (isAdd === 1) {
+      // 在添加的情况下，如果添加前字符串的长度减去新的字符串的长度为2，说明多了一个间隔符，需要调整range
+      if (oldValue.length - showValue.length === -2) {
+        _range = range + 1;
+      }
+    } else {
+      // 在删除情况下，如果删除前字符串的长度减去新的字符串的长度为2，说明少了一个间隔符，需要调整range
+      if (oldValue.length - showValue.length === 2) {
+        _range = range - 1;
+      }
+      // 删除到最开始，range 保持 0
+      if (_range <= 0) {
+        _range = 0;
+      }
+    }
+  } else {
+    arr.some((n, i) => {
+      showValue = i > 0 && i % step === 0 ? showValue + gap + n : showValue + '' + n;
+    });
+    const adapt = range % (step + 1) === 0 ? 1 * isAdd : 0;
+    _range = typeof range !== 'undefined' ? (range === 0 ? 0 : range + adapt) : showValue.length;
+  }
+
+  return { value: showValue, range: _range };
+}
+
+export function trimValue(value, gap = ' ') {
+  value = typeof value === 'undefined' ? '' : value;
+  const reg = new RegExp(gap, 'g');
+  value = value.toString().replace(reg, '');
+  return value;
+}
diff --git a/packages/input/index.vue b/packages/input/index.vue
new file mode 100644
index 0000000..96c43ad
--- /dev/null
+++ b/packages/input/index.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="zui-input">
+    <input
+      class="zui-input__input"
+      :type="inputType"
+      :name="name"
+      v-model="inputBindValue"
+      :placeholder="inputPlaceholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :maxlength="isInputFormative ? '' : maxlength"
+      autocomplete="off"
+      @focus="$_onFocus"
+      @blur="$_onBlur"
+      @keyup="$_onKeyup"
+      @keydown="$_onKeydown"
+      @input="$_onInput"
+    />
+    <div class="zui-input__clear" v-if="clearable && !disabled && !readonly" v-show="!isInputEmpty" @click="$_clearInput">
+      <slot v-if="$slots.clear" name="clear"></slot>
+      <zui-icon v-else name="close"></zui-icon>
+    </div>
+    <slot name="right"></slot>
+  </div>
+</template>
+
+<script>
+import ZuiIcon from '../icon';
+import { getCursorsPosition, setCursorsPosition } from './cursor';
+import { formatValueByGapRule, formatValueByGapStep, trimValue } from './formate-value';
+
+export default {
+  name: 'Input',
+  components: {
+    ZuiIcon,
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    maxlength: {
+      type: [String, Number],
+      default: '',
+    },
+    type: {
+      // text, bankCard, password, phone, money, digit
+      type: String,
+      default: 'text',
+    },
+    name: {
+      type: [String, Number],
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    isFormative: {
+      type: Boolean,
+      default: false,
+    },
+    isTitleLatent: {
+      type: Boolean,
+      default: false,
+    },
+    formation: {
+      type: Function,
+      default: function () {},
+    },
+  },
+  data() {
+    return {
+      inputValue: '',
+      inputBindValue: '',
+      isInputFocus: false,
+    };
+  },
+  computed: {
+    inputItemType() {
+      return this.type || 'text';
+    },
+    inputType() {
+      let inputType = this.inputItemType || 'text';
+      if (inputType === 'bankCard' || inputType === 'phone' || inputType === 'digit') {
+        inputType = 'tel';
+      } else if (inputType === 'money') {
+        inputType = 'text';
+      }
+      return inputType;
+    },
+    isInputEmpty() {
+      return !this.inputValue.length;
+    },
+    isInputFormative() {
+      const type = this.inputItemType;
+      return this.isFormative || type === 'bankCard' || type === 'phone' || type === 'money' || type === 'digit';
+    },
+    inputPlaceholder() {
+      return this.isTitleLatent && this.isInputActive ? '' : this.placeholder;
+    },
+    isInputActive() {
+      return !this.isInputEmpty || this.isInputFocus;
+    },
+  },
+  watch: {
+    value(val) {
+      // Filter out two-way binding
+      if (val !== this.$_trimValue(this.inputValue)) {
+        this.inputValue = this.$_formateValue(this.$_subValue(val + '')).value;
+      }
+    },
+    inputValue(val) {
+      this.inputBindValue = val;
+      val = this.isInputFormative ? this.$_trimValue(val) : val;
+      if (val !== this.value) {
+        this.$emit('input', val);
+        this.$emit('change', this.name, val);
+      }
+    },
+  },
+  created() {
+    this.inputValue = this.$_formateValue(this.$_subValue(this.value + '')).value;
+  },
+  methods: {
+    // MARK: private methods
+    $_formateValue(curValue, curPos = 0) {
+      const type = this.inputItemType;
+      const name = this.name;
+      const oldValue = this.inputValue;
+      const isAdd = oldValue.length > curValue.length ? -1 : 1;
+
+      let formateValue = { value: curValue, range: curPos };
+
+      // no format
+      if (!this.isInputFormative || curValue === '') {
+        return formateValue;
+      }
+
+      // custom format by user
+      const customValue = this.formation(name, curValue, curPos);
+
+      if (customValue) {
+        return customValue;
+      }
+
+      // default format by component
+      let gap = ' ';
+      switch (type) {
+        case 'bankCard':
+          curValue = this.$_subValue(trimValue(curValue.replace(/\D/g, '')));
+          formateValue = formatValueByGapStep(4, curValue, gap, 'left', curPos, isAdd, oldValue);
+          break;
+        case 'phone':
+          curValue = this.$_subValue(trimValue(curValue.replace(/\D/g, '')));
+          formateValue = formatValueByGapRule('3|4|4', curValue, gap, curPos, isAdd);
+          break;
+        case 'money':
+          gap = ',';
+          curValue = this.$_subValue(trimValue(curValue.replace(/[^\d.]/g, '')));
+          // curValue = curValue.replace(/\D/g, '')
+          // eslint-disable-next-line no-case-declarations
+          const dotPos = curValue.indexOf('.');
+          // format if no dot or new add dot or insert befor dot
+          // eslint-disable-next-line no-case-declarations
+          const moneyCurValue = curValue.split('.')[0];
+          // eslint-disable-next-line no-case-declarations
+          const moneyCurDecimal = ~dotPos ? `.${curValue.split('.')[1]}` : '';
+
+          formateValue = formatValueByGapStep(3, trimValue(moneyCurValue, gap), gap, 'right', curPos, isAdd, oldValue.split('.')[0]);
+          formateValue.value += moneyCurDecimal;
+          break;
+        case 'digit':
+          curValue = this.$_subValue(trimValue(curValue.replace(/[^\d.]/g, '')));
+          formateValue.value = curValue;
+          break;
+        /* istanbul ignore next */
+        default:
+          break;
+      }
+
+      return formateValue;
+    },
+    $_subValue(val) {
+      const len = this.inputMaxLength;
+      if (len !== '') {
+        return val.substring(0, len);
+      } else {
+        return val;
+      }
+    },
+    $_onFocus() {
+      this.isInputFocus = true;
+      this.$emit('focus', this.name);
+    },
+    $_onBlur() {
+      setTimeout(() => {
+        this.isInputFocus = false;
+        this.$emit('blur', this.name);
+      }, 100);
+    },
+    $_onKeyup(event) {
+      this.$emit('keyup', this.name, event);
+      if (+event.keyCode === 13 || +event.keyCode === 108) {
+        this.$emit('confirm', this.name, this.inputValue);
+      }
+    },
+    $_onKeydown(event) {
+      this.$emit('keydown', this.name, event);
+    },
+    $_onInput(event) {
+      const formateValue = this.$_formateValue(event.target.value, this.isInputFormative ? getCursorsPosition(event.target) : 0);
+
+      this.inputValue = formateValue.value;
+      this.inputBindValue = formateValue.value;
+
+      if (this.isInputFormative) {
+        this.$nextTick(() => {
+          setCursorsPosition(event.target, formateValue.range);
+        });
+      }
+    },
+    $_trimValue(val) {
+      return trimValue(val, '\\s|,');
+    },
+    $_clearInput() {
+      this.inputValue = '';
+    },
+    // MARK: public methods
+    focus() {
+      this.$el.querySelector('.zui-input__input').focus();
+      setTimeout(() => {
+        this.isInputFocus = true;
+      }, 200);
+    },
+    blur() {
+      this.$el.querySelector('.zui-input__input').blur();
+      this.isInputFocus = false;
+    },
+    getValue() {
+      return this.inputValue;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.zui-input {
+  min-height: 1.5rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &__input {
+    border: none;
+    outline: none;
+    flex: auto;
+    width: 100%;
+  }
+  &__clear {
+    white-space: nowrap;
+    word-break: break-all;
+    display: inline-block;
+    color: $color-minor;
+  }
+}
+</style>
--
libgit2 0.21.0