Simple Input

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

  1. <div class="form-group">
  2.      <div class="input-group">
  3.          <input id="simple-input" required/>
  4.          <label class="control-label" for="simple-input">Text input</label><i class="bar"></i>
  5.      </div>
  6. </div>

Input with icon, validation and description

  1. <div class="form-group with-icon-right" :class="{'has-error': errors.has('successfulEmail'), 'valid': isSuccessfulEmailValid}">
  2.     <div class="input-group">
  3.          <input
  4.              id="successfulEmail"
  5.              name="successfulEmail"
  6.              v-model="successfulEmail"
  7.              v-validate="'required|email'"
  8.              required/>
  9.          <i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
  10.          <i class="fa fa-check valid-icon icon-right input-icon"></i>
  11.          <label class="control-label" for="successfulEmail">Email (validated with success)</label><i class="bar"></i>
  12.          <small v-show="errors.has('successfulEmail')" class="help text-danger">
  13.               {{ errors.first('successfulEmail') }}
  14.          </small>
  15.     </div>
  16. </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

  1. <div class="form-group">
  2.      <div class="input-group">
  3.           <textarea type="text" id="simple-textarea" required></textarea>
  4.           <label class="control-label" for="simple-textarea">Textarea</label><i class="bar"></i>
  5.       </div>
  6. </div>

Input with button

  1. <div class="form-group form-group-w-btn">
  2.       <div class="input-group">
  3.           <input id="input-w-btn" required/>
  4.           <label class="control-label" for="input-w-btn">Input with button</label><i class="bar"></i>
  5.       </div>
  6.       <div class="btn btn-micro btn-primary">UPLOAD</div>
  7. </div>
Just add form-group-w-btn class to form-group container and put button inside of it.

Find DEMOs here!