New property 'maxLength'

components/autocomplete/style.scss

@@ -17,7 +17,7 @@
   }
   &.errored {
     .suggestions {
-      margin-top: - $input-error-height;
+      margin-top: - $input-underline-height;
     }
   }
 }

components/input/_config.scss

@@ -11,7 +11,7 @@ $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
 $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
-$input-error-height:  1.8 * $unit;
+$input-underline-height:  2 * $unit;
 $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
 $input-icon-offset: 1.6 * $unit;

components/input/index.jsx

@@ -11,6 +11,7 @@ class Input extends React.Component {
     floating: React.PropTypes.bool,
     icon: React.PropTypes.string,
     label: React.PropTypes.string,
+    maxLength: React.PropTypes.number,
     multiline: React.PropTypes.bool,
     onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
@@ -40,6 +41,16 @@ class Input extends React.Component {
     }
   }
 
+  renderUnderline () {
+    const error = this.props.error ? <span className={style.error}>{this.props.error}</span> : null;
+    let counter = null;
+    if (this.props.maxLength) {
+      const length = this.props.value ? this.props.value.length : 0;
+      if (length > 0) counter = <span className={style.counter}>{length} / {this.props.maxLength}</span>;
+    }
+    if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
+  }
+
   render () {
     let className = style.root;
     let labelClassName = style.label;
@@ -56,7 +67,7 @@ class Input extends React.Component {
         { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
         <span className={style.bar}></span>
         { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
-        { this.props.error ? <span className={style.error}>{this.props.error}</span> : null }
+        { this.renderUnderline() }
         { this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
       </div>
     );

components/input/readme.md

@@ -38,6 +38,7 @@ class InputTest extends React.Component {
 | `icon`         | `String`        |                 | Name of an icon to use as a label for the input.|
 | `floating`     | `Boolean`       | `true`         | Indicates if the label is floating in the input field or not.|
 | `label`         | `String`        |             | The text string to use for the floating label element.|
+| `maxLength`     | `number`       |             |Specifies the maximum number of characters allowed in the component.|
 | `multiline`     | `Boolean`       | `false`        | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
 | `onBlur`        | `Function`      |                 | Callback function that is fired when components is blured.|
 | `onChange`      | `Function`      |                 | Callback function that is fired when the components's value changes.|

components/input/style.scss

@@ -44,7 +44,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type='date'], &[type='time']{
+  &:focus, &.filled, &[type='date'], &[type='time'] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
@@ -90,11 +90,23 @@
   }
 }
 
-.error {
-  display: block;
+.underline {
+  display: flex;
+  margin-bottom: - $input-underline-height;
   font-size: $input-label-font-size;
-  line-height: $input-error-height;
-  color: $input-text-error-color;
+  line-height: $input-underline-height;
+  color: $input-text-label-color;
+  .error, .counter {
+    flex-grow: 1;
+  }
+}
+
+.error {
+  text-align: left;
+}
+
+.counter {
+  text-align: right;
 }
 
 .disabled > .input {
@@ -115,6 +127,9 @@
       }
     }
   }
+  > .underline {
+    color: $input-text-error-color;
+  }
 }
 
 .hidden {

spec/components/input.jsx

@@ -3,7 +3,7 @@ import Input from '../../components/input';
 
 class InputTest extends React.Component {
   state = {
-    normal: '',
+    normal: 'hello world',
     fixedLabel: '',
     withIcon: ''
   };
@@ -19,7 +19,12 @@ class InputTest extends React.Component {
       <section>
         <h5>Inputs</h5>
         <p>lorem ipsum...</p>
-        <Input type='text' value={this.state.normal} label='Firstname' onChange={this.handleChange.bind(this, 'normal')} />
+        <Input
+          type='text'
+          value={this.state.normal}
+          label='Firstname' onChange={this.handleChange.bind(this, 'normal')}
+          maxLength={12}
+        />
         <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='text' label='Disabled field' disabled />