Inputs

Simple Input

Inputs support disabled attribute, bottom description, validation, side button, left and right icons.

<div class="form-group">
     <div class="input-group">
         <input id="simple-input" required/>
         <label class="control-label" for="simple-input">Text input</label><i class="bar"></i>
     </div>
</div> 

Input with icon, validation and description

<div class="form-group with-icon-right" :class="{'has-error': errors.has('successfulEmail'), 'valid': isSuccessfulEmailValid}">
    <div class="input-group">
         <input
             id="successfulEmail"
             name="successfulEmail"
             v-model="successfulEmail"
             v-validate="'required|email'"
             required/>
         <i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
         <i class="fa fa-check valid-icon icon-right input-icon"></i>
         <label class="control-label" for="successfulEmail">Email (validated with success)</label><i class="bar"></i>
         <small v-show="errors.has('successfulEmail')" class="help text-danger">
              {{ errors.first('successfulEmail') }}
         </small>
    </div>
</div>

Dynamically add has-error or valid to form-group container to show current validity of input.
Add with-icon-right class or with-icon-left to form-group container for positioning desired icon (also add icon inside input-group with icon-left or icon-right class)
Add <small class="help"></small> element inside input-group to show description under input. You can add styling like text-secondary or text-danger and so on.

Textarea

<div class="form-group">
     <div class="input-group">
          <textarea type="text" id="simple-textarea" required></textarea>
          <label class="control-label" for="simple-textarea">Textarea</label><i class="bar"></i>
      </div>
</div>

Input with button

<div class="form-group form-group-w-btn">
      <div class="input-group">
          <input id="input-w-btn" required/>
          <label class="control-label" for="input-w-btn">Input with button</label><i class="bar"></i>
      </div>
      <div class="btn btn-micro btn-primary">UPLOAD</div>
</div>

Just add form-group-w-btn class to form-group container and put button inside of it.

Find DEMOs here!