Input

Nice inputs with many variants.

Default

The input is a functional part in an application so to implement it we have the vs-input component.

Nombre
error
check_circle
Disabled
error
check_circle

Label

To add a label to the input with the property vs-label.

Placeholder
error
check_circle
Disabled
error
check_circle

Label Placeholder

The placeholder can become a label by being active to write with the property vs-label-placeholder

WARNING

This property overrides the vs-label and thevs-placeholder

Label-placeholder
error
check_circle
Label-placeholder-disabled
error
check_circle

Icons

The input can have icons the property to add them is vs-icon and we can also manipulate the position at the end with the propertyvs-icon-after.

TIP

Vuesax use the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

Searchsearch
error
check_circle
Nombremode_edit
error
check_circle
Label-placeholderadd
error
check_circle
Label-placeholdershopping_cart
error
check_circle
icon-disablederror_outline
error
check_circle
icon-disabledemail
error
check_circle

Colors

You can change the color of the edges when the user is active in the input with the property vs-color, You can use the main colors: primary,success, danger,warning, dark or HEX and RGB colors.

WARNING

There is only support for HEX and RGB colors

Default
error
check_circle
Success
error
check_circle
Danger
error
check_circle
Warning
error
check_circle
Dark
error
check_circle
RGB: rgb(213, 14, 151)
error
check_circle
HEX: #11e988
error
check_circle

Validations

You can validate the input in a simple way and without so many complications using the property vs-valid.sync that will return us if the input is valid or not, to be able to know what the validation type is the propertyvs-type.

If you need a custom validation, the property vs-validation-function.

Email
error
check_circle
Number
error
check_circle
url
error
check_circle
Password
error
check_circle
Custom
error
check_circle
Valid: {
  "email": false,
  "number": false,
  "url": false,
  "password": false,
  "custom": false
}

API #

NameTypeParametersDescriptiondefault
v-modelbindlink values.
vs-placeholderStringBrief suggestion describing the expected value of the input field.
vs-labelStringLabel for the input element.
vs-label-placeholderStringLabel label with placeholder shape for the entry element.
vs-iconStringIcon MaterialElement icon.
vs-icon-afterStringPosition of the icon after input.false
vs-colorStringprimary,success,danger,warning,dark,RGB,HEXInput and text color.primary
vs-typeStringemail, number, url, password, customThe type of element.text
vs-valid.syncBooleanboolean bindReturns if the item is valid or not.false
vs-danger-textStringText to show when the item is invalid.
vs-success-textStringText to show when the item is valid.
vs-validation-functionfunctionvalueA custom validation function. Accepts input value as parameter.