diff --git a/build.dev.js b/build.dev.js
index 4854a25..cc4dcb6 100644
--- a/build.dev.js
+++ b/build.dev.js
@@ -63,7 +63,8 @@ function compileScss(code = '') {
 function mkWCFile({ style, html, js }) {
   style = compileScss(style)
 
-  let name, props
+  let name = ''
+  let props = ''
 
   js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) {
     props = m
diff --git a/src/form/input.wc b/src/form/input.wc
new file mode 100644
index 0000000..9cddc68
--- /dev/null
+++ b/src/form/input.wc
@@ -0,0 +1,70 @@
+<template>
+  <label>
+    <slot name="left"></slot>
+    <input />
+    <wc-icon></wc-icon>
+    <slot class="append" name="append"></slot>
+  </label>
+</template>
+
+<style lang="scss">
+:host {
+  display: inline-block;
+  user-select: none;
+  color: nth($cd, 2);
+}
+
+label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 32px;
+  height: 32px;
+  font-size: 14px;
+  border: 1px solid nth($cp, 3);
+  border-radius: 4px;
+  background: #fff;
+  color: inherit;
+  cursor: inherit;
+
+  input,
+  textarea {
+    padding: 0 5px;
+    border: 0;
+    border-radius: inherit;
+    color: inherit;
+    font-size: inherit;
+    background: none;
+    outline: none;
+    box-shadow: none;
+  }
+  .append {
+    display: inherit;
+    width: auto;
+    height: 30px;
+    padding: 0 18px;
+    border-left: 1px solid nth($cp, 3);
+    border-radius: 0 4px 4px 0;
+    background: nth($cp, 1);
+  }
+}
+</style>
+
+<script>
+import '../icon/index'
+
+export default class Input {
+  props = {
+    value: '',
+    defaultValue: '',
+    placeholder: ''
+  }
+  constructor() {
+    /* render */
+
+    this.__OUTER__ = this.root.children[1]
+    this.__INPUT__ = this.__OUTER__.children[1]
+    this.__ICO__ = this.__OUTER__.children[2]
+  }
+}
+</script>
diff --git a/src/icon/index.wc b/src/icon/index.wc
index d3a8cfd..39a131e 100644
--- a/src/icon/index.wc
+++ b/src/icon/index.wc
@@ -5,14 +5,16 @@
 <style lang="scss">
 :host {
   display: inline-block;
+  width: 32px;
+  height: 32px;
   color: nth($cd, 2);
 }
 :host(:not([is])) {
   display: none;
 }
 .icon {
-  width: 100%;
-  height: 100%;
+  width: inherit;
+  height: inherit;
   fill: currentColor;
   vertical-align: -0.1em;
 
@@ -26,6 +28,50 @@
   }
 }
 
+:host([size='large']) .icon {
+  width: 42px;
+  height: 42px;
+}
+:host([size='medium']) .icon {
+  width: 38px;
+  height: 38px;
+}
+:host([size='mini']) .icon {
+  width: 20px;
+  height: 20px;
+}
+:host([color='red']) .icon {
+  color: nth($cr, 2);
+}
+
+:host([color='blue']) .icon {
+  color: nth($cb, 2);
+}
+
+:host([color='green']) .icon {
+  color: nth($cg, 2);
+}
+
+:host([color='teal']) .icon {
+  color: nth($ct, 2);
+}
+
+:host([color='orange']) .icon {
+  color: nth($co, 2);
+}
+
+:host([color='dark']) .icon {
+  color: nth($cd, 2);
+}
+
+:host([color='purple']) .icon {
+  color: nth($cpp, 2);
+}
+
+:host([color='grey']) .icon {
+  color: nth($cgr, 2);
+}
+
 @keyframes circle {
   0% {
     stroke-dasharray: 0, 3812px;