Selects with a clean and smooth animation, that are very easy to implement.
To add a select to the application we have the component vs-select
. You can customize the arrow icon by passing an icon name to icon
.
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
with fa
or fas
. You still need to include the Font Awesome icons in your project.
You can change the color of the select with the property color
WARNING
Only RGB and HEX colors are supported.
You can add the autocomplete functionality in the desired selected with the property autocomplete
.
You can have a selection with multiple selections with the property multiple
. If you need the user to select only a certain number of options you can use the property max-selected
.
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.
You can validate if an option is selected with the property is-selected.sync
and do with it multiple variants with changing the text of the selected options
You can group elements with the sub component vs-select-group
You can set the width of the select width the width
property
Name | Type | Parameters | Description | default |
---|---|---|---|---|
options | Array | { "text:'Example'": null, "value:'1'": null } | Options to select. | |
color | String | Change the color of the button | primary | |
autocomplete | Boolean | Enables the use of autocomplete in the select. | false | |
multiple | Boolean | Determines whether the selection is of multiple selection. | false | |
max-selected | Number | Determine the number of maximum options to be able to select (only for active multiple). | All options | |
label | String | Label for the input element. | ||
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. | ||
is-selected.sync | Boolean sync | Determines if the option is selected. | ||
input-changed | Event | event (optional) | Triggers method when input of select is changed (requires autocomplete prop) | |
width | String | Set the width of the select | ||
icon | String | icon name | Element icon. | keyboard_arrow_down |
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 |