Inputs

Components

• va-input
• va-input-wrapper
• va-message-list

va-input

<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> 

va-input-wrapper

va-message-list

Message list is intended as internal component for displaying consistently list of messages. It is used in various input components to show descriptions and error messages. This component can be used as standalone in form component to show form-specific messages.

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!