Add input guide and fix style

example/src/example.js

@@ -103,15 +103,29 @@ export default class Example extends Component {
           <Column>bbbb</Column>
           <Column>cccc</Column>
         </Columns>
-        <Input
-          state="isDisabled"
-          color="isDanger"
-          icon="fa fa-heart"
+        <div style={{ width: '300px'}}>
+          <Label>asdasd</Label>
+          <Input
+             state="isDisabled"
+             color="isDanger"
+             icon="fa fa-heart"
           help={{
-            text: 'help text',
-            color: 'isSuccess',
-          }}
-        />
+               text: 'help text',
+               color: 'isSuccess',
+             }}
+             />
+          <Label>asdasd</Label>
+          <Input
+             color="isDanger"
+             icon="fa fa-heart"
+             hasIconRight
+             value="hoge"
+             help={{
+               text: 'help text',
+               color: 'isSuccess',
+             }}
+             />
+          </div>
         <Textarea
           state="isLoading"
           color="isInfo"

src/forms/checkbox.js → src/elements/forms/checkbox.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import styles from '../../build/styles';
+import styles from '../../../build/styles';
 
 export default class Checkbox extends Component {
   static propTypes = {

src/forms/index.js → src/elements/forms/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 
 import React, { Component, PropTypes } from 'react';
-import styles from '../../build/styles';
-import { getCallbacks } from '../helper/helper';
+import styles from '../../../build/styles';
+import { getCallbacks } from '../../helper/helper';
 
 export class FormHorizontal extends Component {
   static propTypes = {

src/elements/forms/input.examples.md

@@ -0,0 +1,36 @@
+  ### Import
+
+  `import { Input } from 're-bulma';`
+
+  ### Input
+
+    <div>
+      <Label>Name</Label>
+      <Input type="text" placeholder="Text input" />
+      <Label>Username</Label>
+      <Input
+        color="isSuccess"
+        type="text"
+        placeholder="Textinput"
+        defaultValue="bulma"
+        icon="fa fa-check"
+        hasIconRight
+        help={{
+          color: 'isSuccess',
+          text: 'This username is available',
+        }}
+      />
+      <Label>Email</Label>
+      <Input
+        color="isDanger"
+        type="text"
+        placeholder="Email input"
+        defaultValue="hello@"
+        icon="fa fa-warning"
+        hasIconRight
+        help={{
+          color: 'isDanger',
+          text: 'This email is invalid',
+        }}
+      />
+    </div>

src/forms/input.js → src/elements/forms/input.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
-import styles from '../../build/styles';
-import { getCallbacks } from '../helper/helper';
+import styles from '../../../build/styles';
+import { getCallbacks } from '../../helper/helper';
 
 export default class Input extends Component {
   static propTypes = {

src/forms/radio.js → src/elements/forms/radio.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import styles from '../../build/styles';
+import styles from '../../../build/styles';
 
 export default class Radio extends Component {
   static propTypes = {

src/forms/select.js → src/elements/forms/select.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
-import styles from '../../build/styles';
-import { getCallbacks } from '../helper/helper';
+import styles from '../../../build/styles';
+import { getCallbacks } from '../../helper/helper';
 
 export default class Select extends Component {
   static propTypes = {

src/forms/textarea.js → src/elements/forms/textarea.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import styles from '../../build/styles';
+import styles from '../../../build/styles';
 
 export default class Textarea extends Component {
   static propTypes = {

src/elements/label.examples.md

@@ -0,0 +1,7 @@
+  ### Import
+
+  `import { Label } from 're-bulma';`
+
+  ### Label
+
+    <Label>label</Label>

src/label.js → src/elements/label.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import styles from '../build/styles';
+import styles from '../../build/styles';
 
 export default class Label extends Component {
   static propTypes = {

src/index.js

@@ -13,17 +13,17 @@ import Image from './elements/image';
 import Notification from './elements/notification';
 import Tag from './elements/tag';
 import Progress from './elements/progress';
-
-import { Columns, Column } from './columns';
-import Label from './label';
-import { FormHorizontal, ControlLabel } from './forms/';
+import { FormHorizontal, ControlLabel } from './elements/forms/';
+import Label from './elements/label';
 import Group from './group';
 import Addons from './addons';
-import Input from './forms/input';
-import Textarea from './forms/textarea';
-import Select from './forms/select';
-import Checkbox from './forms/checkbox';
-import Radio from './forms/radio';
+import Input from './elements/forms/input';
+import Textarea from './elements/forms/textarea';
+import Select from './elements/forms/select';
+import Checkbox from './elements/forms/checkbox';
+import Radio from './elements/forms/radio';
+
+import { Columns, Column } from './columns';
 import { Table, Td, Th, Tr, Tbody, Thead, Tfoot } from './table';
 import { Tabs, TabGroup, Tab } from './tabs';
 import Message from './message';

src/styles/form.css

@@ -1,10 +1,12 @@
 .input {
+  box-sizing: border-box;
   vertical-align: middle;
   font: 99% sans-serif;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
 
 select.select {
+  box-sizing: border-box;
   vertical-align: middle;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   -moz-osx-font-smoothing: grayscale;
@@ -23,6 +25,7 @@ input[type="checkbox"].input {
 
 select.select, textarea.textarea {
   font: 99% sans-serif;
+  box-sizing: border-box;
 }
 
 input[type=button].input,