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

<va-date-picker
  :config="{mode: 'multiple'}"
  v-model="date"
  label="Pick dates"
/>

Props

• value - defines selected date
• weekDays - Boolean - use :weekDays="true" to add panel with days of week
• placeholder - String - set input placeholder
• label - String - set input label
• disabled - Boolean - set input disabled
• error - Boolean - change input color to danger
• success - Boolean - change input color to success
• messages - Array - use to show info messages
• errorMessages - Array - use to show errors
• config - Object - use config to change datepicker options

Selects

<va-select
  :options="options"
  v-model="value"
  label="Country"
  placeholder="Select country"
  clearable="false"
/>

<va-select
  :options="options"
  v-model="value"
  multiple
  searchable
/>

Props

• value - String|Array
• label - String - label of select
• placeholder - String - placeholder of select
• options - Array (default: []) - list of select options. You can use strings or objects as an option. See the object option structure below.
• position: String (default: 'bottom') - direction of select open (one of these values: 'bottom', 'top'),
• multiple - Boolean (default: false) - changes select to multiple
• tagMax - Number (default: 5) - the max number of chips, when the number of selected items is bigger then max, there is only text '6 items selected'
• searchable - Boolean (default: false) - if set true, input can be edited and options are filter automatically by inputted text
• disabled - Boolean (default: false) - disable the select
• readonly - Boolean (default: false) - puts input in readonly state
• width - String (default: 100%) - the width of the select
• maxHeight - String (default: 128px) - the maximum height of the select
• noOptionsText - String (default: 'Items not found') - set the custom text, if there are no options in select
• fixed - Boolean (default: true) - Fixed dropdown works fine even if container is position: relative; overflow: hidden
• error - Boolean (default: false) - Sets error state
• success - Boolean (default: false) - Sets the success state

Option

• text - String - displayed text of option. Field name can be changed by text-by prop
• icon - String
• id - String | Number - option key. Field name can be changed by key-by prop

Toggles

Toggle component is conceptually similar to checkbox, but stars a different look.

<va-toggle
  v-model="value"
  label="Toggle"
/>
<va-toggle
  v-model="value"
  :true-value="on"
  :false-value="off"
  label="value"
/>
<va-toggle
  v-model="value"
  color="info"
  small
/>

Props

• value - Boolean | String | Number - shows or hide the popover
• label - String - text of slot label for the toggle
• color - String (default: 'success') - use this property to set the color of the track. We can choose one color from a set of theme colors (primary, secondary, info, error, warning)
• disable - Boolean - use this property to make toggle disabled
• small - Boolean - use this property to set small size of toggle
• large - Boolean - use this property to set large size of toggle
• true-value - toggle gets into true state, when model has this value
• false-value - toggle gets into false state, when model has this value
• tabindex - Number - use this property to set custom tabindex

Find DEMOs here!