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

Label

Add a label to the input with the property label.

Placeholder
Disabled

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

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.

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
icon-after mode_edit
Label-placeholder add
Label-placeholder shopping_cart
icon-disabled error_outline
icon-disabled email
icon-no-border account_circle

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

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

Size

Size large
Size Default
Size small

API #

Name Type Parameters Description default
v-model bind Link values.
placeholder String Brief suggestion describing the expected value of the input field.
label String Label for the input element.
label-placeholder String Label label with placeholder shape for the entry element.
autofocus Boolean,String Same as `autofocus` in native input false
icon String icon name Element icon.
val-icon-success String icon name The icon to use for success validations
val-icon-danger String icon name The icon to use for danger validations
val-icon-warning String icon name The icon to use for warning validations
icon-pack String Icon Pack Class Name Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons
icon-no-border Boolean boolean bind If true, remove the border-right of the icon (separator between the icon and the input) false
val-icon-pack String Validation Icon Pack Class Name Icon Pack to be used by the Validation Icons. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons
icon-after Boolean,String If true, sets icon to appear after input. false
color String primary,success,danger,warning,dark,RGB,HEX Input and text color. primary
size String small,normal,large Size of input. normal
type String email, number, url, password, custom The type of element input. text
success Boolean boolean bind Activate the status of success in the input. false
danger Boolean boolean bind Activate the status of danger in the input. false
warning Boolean boolean bind Activate the status of warning in the input. false
description-text String Add a description text to the input. false
danger-text String Text to show when the item is invalid.
success-text String Text to show when the item is valid.
warning-text String Text that is displayed in the warning state.