Inputs

Components

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

va-input

<va-input
  v-model="empty"
  placeholder="Name"
/>

<va-input
 v-model="text"
 label="Name"
 removable
 success
 :messages="successMessages"
/>

<va-input
 v-model="text"
 label="Name"
 type="textarea"
 :minRows="3"
 :maxRows="8"
/>

Props

• value - String | Number.
• label - String.
• placeholder - String.
• type - String (default: 'text').
• disabled - Boolean.
• readonly - Boolean.
• removable - Boolean. // textarea-specific
• autosize - Boolean
• min-rows - Number
• max-rows - Number

va-input-wrapper

<va-input-wrapper :messages="messages">
 <div slot="prepend" class="flex-center">
   <va-icon name="fa fa-volume-off"/>
 </div>
 <div>Default Slot</div>
 <div slot="append" class="flex-center">
   <va-icon name="fa fa-volume-up"/>
 </div>
</va-input-wrapper>

<va-input-wrapper :messages="messages">
  <va-checkbox name="agree-to-terms" v-model="agreedToTerms">
    <template slot="label">
      I agree to
      <a class="link" href="javascript:void(0);">Terms of use.</a>
    </template>
  </va-checkbox>
</va-input-wrapper>

Props

• disabled - Boolean.
• error - Boolean.
• success - Boolean.
• messages - Array
• error-messages - Array
• error-count - Number

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.

<va-message-list :limit="3" :value="stringMessages"/>

Props

• value - Object.
• limit - Number (default: 1).

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>

Find DEMOs here!