Input

Nice inputs with many variants.

Default

The input is a functional part in an application, For implementing it we have the vs-input component.

Placeholder

Disabled

<template lang="html">
  <div class="centerx default-input">
     <vs-input class="inputx" placeholder="Placeholder" v-model="value1"/>
     <vs-input disabled class="inputx" placeholder="Disabled" v-model="value2"/>
   </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:''
    }
  }
}
</script>

<style lang="stylus">
.default-input
  .inputx
    margin 10px
</style>

Label

Add a label to the input with the property label.

Name

Placeholder

Password

Disabled

<template lang="html">
  <div class="centerx labelx">
    <vs-input label="Name" placeholder="Placeholder" v-model="value1"/>
    <vs-input type="password" label="Password" placeholder="Disabled" v-model="value2"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:''
    }
  }
}
</script>

<style lang="stylus">
  .labelx
    .vs-input
      margin 10px;
</style>

Label Placeholder

The placeholder can become a label when the input is focused. Use the property label-placeholder for making this.

:::warning This property overrides the label and theplaceholder :::

Label-placeholder

Label-placeholder-disabled

<template lang="html">
  <div class="centerx">
    <vs-input label-placeholder="Label-placeholder" v-model="value1"/>
    <vs-input disabled="true" label-placeholder="Label-placeholder-disabled" v-model="value2"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:''
    }
  }
}
</script>

Icons

The input can have icons. Use the property icon. You can also also manipulate the icon's position with the property icon-after.

::: tip Vuesax uses the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page (opens new window).

FontAwesome and other fonts library are supported. Simply use the icon-pack and val-icon-pack parameters with fa or fas. You still need to include the Font Awesome icons in your project.

:::

Search search

Search search

icon-after mode_edit

Label-placeholder add

Label-placeholder shopping_cart

icon-disabled error_outline

icon-disabled email

icon-no-border account_circle

<template lang="html">
  <div class="centerx icons-example">
    <vs-input icon="search" placeholder="Search" v-model="value1"/>
    <vs-input icon-after="true" label-placeholder="icon-after" icon="mode_edit" placeholder="Nombre" v-model="value2"/>
    <vs-input icon="add" label-placeholder="Label-placeholder" v-model="value3"/>
    <vs-input icon-after="true"  icon="shopping_cart" label-placeholder="Label-placeholder" v-model="value4"/>
    <vs-input disabled="true" icon="error_outline" label-placeholder="icon-disabled" v-model="value5"/>
    <vs-input icon-after="true" disabled="true" icon="email" label-placeholder="icon-disabled" v-model="value6"/>
    <vs-input icon-no-border icon="account_circle" label-placeholder="icon-no-border" v-model="value7"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:'',
      value3:'',
      value4:'',
      value5:'',
      value6:'',
      value7:'',
      value8: ''
    }
  }
}
</script>

<style lang="stylus">
.icons-example
  .vs-input
    margin 15px
</style>

Colors

You can change the color of the borders when the focus the input with the property color. You are able to use the Main Colors or RGB and HEX colors.

:::warning There is only support for HEX and RGB colors :::

Default

Success

Danger

Warning

Dark

RGB: rgb(213, 14, 151)

HEX: #11e988

<template lang="html">
  <div class="centerx colors-example">
    <vs-input label-placeholder="Default" v-model="value1"/>
    <vs-input color="success" label-placeholder="Success" v-model="value2"/>
    <vs-input color="danger" label-placeholder="Danger" v-model="value3"/>
    <vs-input color="warning" label-placeholder="Warning" v-model="value4"/>
    <vs-input color="dark" label-placeholder="Dark" v-model="value5"/>
    <vs-input color="rgb(213, 14, 151)" label-placeholder="RGB: rgb(213, 14, 151)" v-model="value6"/>
    <vs-input color="#11e988" label-placeholder="HEX: #11e988" v-model="value7"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:'',
      value3:'',
      value4:'',
      value5:'',
      value6:'',
      value7:''
    }
  }
}
</script>

<style lang="stylus">
.colors-example
  .vs-input
    margin 5px
    margin-top 20px;
</style>

Validations

You can add a state for example of in affirmative response to a validation with success and if it is necessary to add a description or help to the user you can do it with the property description

:::tip   Each of the states you can change the text, for example in the case of danger-text for the state of danger. :::

Email Success done

The email is valid

Password Danger clear

The password does not meet the standards

Date Warning warning

The entered data could not be verified

Phone Description

Just enter the first 2 (two) numbers of your phone

<template lang="html">
  <div>
    <vs-input
      :success="true"
      success-text="The mail is valid"
      placeholder="Email Success"
      v-model="value1"/>
      <vs-input
      :danger="true"
      danger-text="The password does not meet the standards"
      placeholder="Password Danger"
      v-model="value2"/>
      <vs-input
      :warning="true"
      warning-text="The entered data could not be verified"
      placeholder="Date Warning"
      v-model="value3"/>
      <vs-input
      description-text="Just enter the first two numbers of your phone"
      placeholder="Phone Description"
      v-model="value4"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:'',
      value3:'',
      value4:'',
    }
  }
}
</script>

<style lang="css" scoped>
  pre {
    width: 100%;
    color: rgba(255, 255, 255,.8);
  }
</style>

Size

Size large

Size Default

Size small

<template lang="html">
  <div class="size-example">
    <vs-input size="large" placeholder="Size large" v-model="value1" />
    <vs-input size="default" placeholder="Size default" v-model="value2" />
    <vs-input size="small" placeholder="Size small" v-model="value3" />
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:'',
      value3:''
    }
  }
}
</script>

<style lang="stylus">
.size-example
  .vs-input
    margin 6px;
</style>