Nice inputs with many variants.
The input is a functional part in an application, For implementing it we have the vs-input
component.
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
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.
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
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.
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. | ||
v-on:icon-click | Function | Event to trigger on click on icon |