Input

# Input

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Add an elements input facilitate with the component <vs-input>

Code copied

# Label

Add a label to the input with the property label

Code copied

# Label Placeholder

You can have a placeholder with a great animation when being or in focus or with a value becoming a label above the input with the property label-placeholder

Code copied

# Color

Change the color of the component and add a border below with the color property, the allowed values ​​are the main colors of vuesax and the colors (RGB y HEX)

Code copied

# icon

Add an icon to the input easily with the slot icon if you want the icon to be before the input you can do it with the property icon-before

Iconos por defecto

Vuesax no usa ninguna librería o fuente de iconos por defecto, con esto damos la libertad de usar la que prefieras Todos los componentes que usen en algún lugar un icono por defecto como el de close en un Alert o un Popup va a ser un svg para no tener que instalar ningún tipo de fuente externa, y se podrá sustituir con un slot="icon" por el icono de su preferencia

Vuesax Docs Icons

Estos documentos y los ejemplos usan la libreria de componentes boxicons, no es obligatoria o necesaria para el uso de Vuesax pero la recomendamos por su amplia gama de iconos y como complementan visualmente el framework

Code copied

# Message New

You can add a message below the input with the slot="message- {vuesax color}" to report that a field is missing or the value is wrong

Email Valid
Required
Insecure password
Code copied

# State New

Change the color of the input for some state, the allowed states are (primary, success, danger, warn, dark)

Code copied

# Progress New

Add a validation progress bar, the most common is its use to validate passwords and correct data within the input, its value is (0 - 100).

The example validates that the password has at least

  • A special character   - More than 6 digits   - One lower case letter   - An uppercase letter   - A number
Code copied

# Loading New

Add a loading animation to the input with the loading property, the property is a Boolean, so you can add it without any value.

Code copied

# Input types

Change the type of input with the type property as a native html input, the default value is text

Code copied

# Border New

Change everything is style of the component with the border property, the property is a Boolean, so you can add it without any value.

Code copied

# Shadow New

Change everything is style of the component with the shadow property, the property is a Boolean, so you can add it without any value.

Code copied

# API

props

Property Type Values Description default Example More
placeholder String String Add a placeholder to the input. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input v-model="value" placeholder="Name" />
  </div>
</template>
label String String Add a label above the component. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      label="Name"
      v-model="value"
      placeholder="Evan You"
    />
  </div>
</template>
label-placeholder String String Add a placeholder converts to focus on a label. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      label-placeholder="Country"
      v-model="value"
    />
  </div>
</template>
color string vuesax colorsRGBHEX Change component color. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      primary
      v-model="value"
      placeholder="Primary" />

    <vs-input
      success
      v-model="value2"
      placeholder="Success" />

    <vs-input
      danger
      v-model="value3"
      placeholder="Danger" />

    <vs-input
      warn
      v-model="value4"
      placeholder="Warn" />

    <vs-input
      dark
      v-model="value5"
      placeholder="Dark" />

    <vs-input
      color="#7d33ff"
      v-model="value6"
      placeholder="HEX" />

    <vs-input
      color="rgb(59,222,200)"
      v-model="value7"
      placeholder="HEX" />
  </div>
</template>
state String vuesax colorsRGBHEX Change the background color of the component by changing its status. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      primary
      v-model="value"
      state="primary"
      placeholder="Primary" />

    <vs-input state="success" success v-model="value2" placeholder="Success Icon">
      <template #icon>
        <i class='bx bx-user'></i>
      </template>
    </vs-input>

    <vs-input state="danger" danger icon-after v-model="value2" placeholder="Danger icon after">
      <template #icon>
        <i class='bx bx-mail-send' ></i>
      </template>
    </vs-input>

    <vs-input
      warn
      state="warn"
      v-model="value4"
      placeholder="Label Warn"
      label="Warn" />

    <vs-input
      dark
      state="dark"
      v-model="value5"
      label-placeholder="Dark" />
  </div>
</template>
progress number 0 - 100 Add a progress bar starting in red and ending in green. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      type="password"
      v-model="value"
      label-placeholder="Password"
      :progress="getProgress"
      :visiblePassword="hasVisiblePassword"
      icon-after
      @click-icon="hasVisiblePassword = !hasVisiblePassword">
      <template #icon>
        <i v-if="!hasVisiblePassword" class='bx bx-show-alt'></i>
        <i v-else class='bx bx-hide'></i>
      </template>

      <template v-if="getProgress >= 100" #message-success>
        Secure password
      </template>

    </vs-input>
  </div>
</template> <script>
  export default {
    data:() => ({
      value: '',
      hasVisiblePassword: false
    }),
    computed: {
      getProgress() {
        let progress = 0

        // at least one number

        if (/\d/.test(this.value)) {
          progress += 20
        }

        // at least one capital letter

        if (/(.*[A-Z].*)/.test(this.value)) {
          progress += 20
        }

        // at menons a lowercase

        if (/(.*[a-z].*)/.test(this.value)) {
          progress += 20
        }

        // more than 5 digits

        if (this.value.length >= 6) {
          progress += 20
        }

        // at least one special character

        if (/[^A-Za-z0-9]/.test(this.value)) {
          progress += 20
        }

        return progress
      }
    }
  }
  </script>
loading boolean boolean Add a loading animation to the input. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input loading v-model="value" placeholder="Name" />
  </div>
</template>
type string html type Change the type of input (html values). Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      type="text"
      v-model="value1"
      label="Text"
    />
    <vs-input
      type="password"
      v-model="value2"
      label="Password"
    />
    <vs-input
      type="search"
      v-model="value3"
      label="Search"
    />
    <vs-input
      type="number"
      v-model="value4"
      label="Number"
    />
    <vs-input
      type="url"
      v-model="value5"
      label="Url"
    />
    <vs-input
      type="time"
      v-model="value6"
      label="time"
    />
    <vs-input
      type="date"
      v-model="value7"
      label="Date"
    />
  </div>
</template>
border boolean boolean Change the style of the component. false Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input border v-model="value" placeholder="Name" />

    <vs-input color="#7d33ff" border type="password" v-model="value2" placeholder="Password">
      <template #icon>
        <i class='bx bx-lock-open-alt'></i>
      </template>
    </vs-input>

    <vs-input border warn type="email" icon-after v-model="value3" label-placeholder="Address">
      <template #icon>
        <i class='bx bxl-bitcoin'></i>
      </template>
    </vs-input>
  </div>
</template>
shadow boolean boolean Change the style of the component. false Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input shadow v-model="value" placeholder="Name" />

    <vs-input color="#7d33ff" shadow type="password" v-model="value2" placeholder="Password">
      <template #icon>
        <i class='bx bx-lock-open-alt'></i>
      </template>
    </vs-input>

    <vs-input shadow warn type="email" icon-after v-model="value3" label-placeholder="Address">
      <template #icon>
        <i class='bx bxl-bitcoin'></i>
      </template>
    </vs-input>
  </div>
</template>
icon-after boolean boolean Put the icon after the input. false Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input type="password" icon-after v-model="value2" placeholder="Password">
      <template #icon>
        <i class='bx bx-lock-open-alt'></i>
      </template>
    </vs-input>
  </div>
</template>
visible-password boolean boolean If the input is of the password type, it is modified to show the password. false Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      type="password"
      v-model="value"
      label-placeholder="Password"
      :progress="getProgress"
      :visiblePassword="hasVisiblePassword"
      icon-after
      @click-icon="hasVisiblePassword = !hasVisiblePassword">
      <template #icon>
        <i v-if="!hasVisiblePassword" class='bx bx-show-alt'></i>
        <i v-else class='bx bx-hide'></i>
      </template>

      <template v-if="getProgress >= 100" #message-success>
        Secure password
      </template>

    </vs-input>
  </div>
</template>

slots

Property Type Values Description default Example More
icon Slot Add an icon to the input. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input v-model="value1" placeholder="User name">
      <template #icon>
        <i class='bx bx-user'></i>
      </template>
    </vs-input>

    <vs-input type="password" icon-after v-model="value2" placeholder="Password">
      <template #icon>
        <i class='bx bx-lock-open-alt'></i>
      </template>
    </vs-input>
  </div>
</template>
message Slot Add an informative text below the input. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input v-model="value1" placeholder="Email">
      <template #message-success>
        Email Valid
      </template>
    </vs-input>

    <vs-input v-model="value2" placeholder="Name">
      <template #message-danger>
        Required
      </template>
    </vs-input>

    <vs-input type="password" v-model="value3" placeholder="Password">
      <template #message-warn>
        Insecure password
      </template>
    </vs-input>

    <vs-input v-model="value4" label="Example Regex Validation" placeholder="vuesax@gmail.com">
      <template v-if="validEmail" #message-success>
        Email Valid
      </template>
      <template v-if="!validEmail && value4 !== ''" #message-danger>
        Email Invalid
      </template>
    </vs-input>
  </div>
</template>
Last Updated: 1/18/2020, 3:03:45 PM

Checkbox