Select

Selects with a clean and smooth animation, that are very easy to implement.

Single selection

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.

keyboard_arrow_down
keyboard_arrow_down
keyboard_arrow_down
arrow_downward

Color

You can change the color of the select with the property color

WARNING

Only RGB and HEX colors are supported.

keyboard_arrow_down
keyboard_arrow_down

Autocomplete

You can add the autocomplete functionality in the desired selected with the property autocomplete.

keyboard_arrow_down
keyboard_arrow_down
keyboard_arrow_down

Multiple

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.

keyboard_arrow_down
keyboard_arrow_down
keyboard_arrow_down

Labels

Add a label to the input with the property label.

keyboard_arrow_down
keyboard_arrow_down

Validators

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.

keyboard_arrow_down
This field is valid
keyboard_arrow_down
This field is invalid
keyboard_arrow_down
This field is invalid
keyboard_arrow_down
Simple info for multiple select

Is Selected Item

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

keyboard_arrow_down

Group items

You can group elements with the sub component vs-select-group

keyboard_arrow_down
keyboard_arrow_down
keyboard_arrow_down

Width

You can set the width of the select width the width property

keyboard_arrow_down
keyboard_arrow_down

API #

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