Form Elements

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

export default {
  data () {
    return {
      empty: '',
      text: 'Vuestic Line',
      messages: ['Required field']
    }
  },
}

Props

• value - String | Number.
• label - String.
• placeholder - String.
• type - String (default: 'text').
• disabled - Boolean.
• readonly - Boolean.
• removable - Boolean.
• autosize (textarea-specific) - Boolean
• min-rows (textarea-specific) - Number
• max-rows (textarea-specific) - 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"/>

export default {
  data () {
    return {
      stringMessages: ['Message', 'Another message', 'Long long long long long long error message']
    }
  },
}

Props

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

Radio Buttons

<va-radio-button
  v-model="selectedOptionString"
  option="one"
  label="one"
/>

Props

• value - Boolean.
• label - String.
• option - String.
• disabled - Boolean.

Checkboxes

<va-checkbox
  v-model="value"
  label="Selected"
/>
<va-checkbox
  v-model="value"
  :errorMessages="errorMessages"
  :errorCount="3"
  label="With errors"
/>
<va-checkbox
  v-model="array"
  array-value="one"
/>

Props

• id - String
• name - String
• label - String - label to the right of checkbox
• value - Boolean | Array - main value
• arrayValue - Any
• indeterminate - Boolean - indeterminate state. Note that value should be true for indeterminate icon to be displayed.
• disabled - Boolean
• readonly - Boolean
• checkedIcon - String | Array (default: 'ion ion-md-checkmark')
• indeterminateIcon - String | Array (default: 'ion ion-md-remove')
• errorMessages - Number - list of error messages for current input field
• errorCount - Number (default: 1) - shows a number of errors to display, given an array of error messages is passed
• error - Boolean - define whether the field is error or not

Datepickers

Selects

Toggles