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 pageopen in new window.

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.

Figuras

<template lang="html">
  <div class="con-select-example">
    <vs-select
      class="selectExample"
      label="Figuras"
      v-model="select1"
      >
      <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in options1" />
    </vs-select>
    <vs-select
      class="selectExample"
      label="Figuras"
      v-model="select2"
      >
      <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in options2" />
    </vs-select>
    <vs-select
      disabled
      class="selectExample"
      label="Figuras"
      v-model="select3"
      >
      <vs-select-item :key="index" :disabled="index==2" :modelValue="item.value" :text="item.text" v-for="item,index in options3" />
    </vs-select>
    <vs-select
      class="selectExample"
      label="Figuras"
      v-model="select4"
      icon="arrow_downward"
      >
      <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in options4" />
    </vs-select>
  </div>
</template>

<script>
export default {
  data(){
    return {
      select1Normal:'',
      select1:2,
      select2:7,
      select3:2,
      select4:5,
      options1:[
        {text:'IT',value:0},
        {text:'Blade Runner',value:2},
        {text:'Thor Ragnarok',value:3},
      ],
      options2:[
        {text: 'Square', value: 1},
        {text: 'Rectangle', value: 2},
        {text: 'Rombo', value: 3},
        {text: 'Romboid', value: 4},
        {text: 'Trapeze', value: 5},
        {text: 'Triangle', value: 6},
        {text: 'Polygon', value: 7},
        {text: 'Regular polygon', value: 8},
        {text: 'Circumference', value: 9},
        {text: 'Circle', value: 10},
        {text: 'Circular sector', value: 11},
        {text: 'Circular trapeze', value: 12},
      ],
      options3:[
        {text: 'Red', value: 1},
        {text: 'Green', value: 2},
        {text: 'Blue', value: 3},
        {text: 'Purple', value: 4},
      ],
      options4:[
        {text: 'Square', value: 1},
        {text: 'Rectangle', value: 2},
        {text: 'Rombo', value: 3},
        {text: 'Romboid', value: 4},
        {text: 'Trapeze', value: 5},
        {text: 'Triangle', value: 6},
        {text: 'Polygon', value: 7},
      ],
    }
  },
  methods:{
    prueba(){
      console.log("prueba de focsu");
    }
  }
}
</script>

<style lang="css">
.selectExample {
  margin: 10px;
}
.con-select-example {
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-select .vs-select {
  width: 100%
}
@media (max-width: 550px) {
  .con-select {
    flex-direction: column;
  }
  .con-select .vs-select {
    width: 100%
  }
}
</style>

Color

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

WARNING

Only RGB and HEX colors are supported.

Figuras

Autocomplete

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

Figuras

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.

Figuras

Labels

Add a label to the input with the property label.

Multiple

Autocomplete

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.

Success

This field is valid

Danger

This field is invalid

Warning

This field is invalid

Description

Simple info for multiple select

<template lang="html">
  <div class="con-select-example">
    <vs-select
     :success="true"
      success-text="This field is valid"
      placeholder="Select"
      class="selectExample"
      label="Success"
      multiple
      v-model="select1"
      >
      <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in exampleOptions" />
    </vs-select>
       <vs-select
      :danger="true"
      danger-text="This field is invalid"
      placeholder="Select"
      class="selectExample"
      label="Danger"
      multiple
      v-model="select2"
      >
      <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in exampleOptions" />
    </vs-select>
       <vs-select
      :warning="true"
      warning-text="This field is invalid"
      placeholder="Select"
      class="selectExample"
      label="Warning"
      multiple
      v-model="select3"
      >
      <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in exampleOptions" />
    </vs-select>
       <vs-select
      description-text="Simple info for multiple select"
      placeholder="Select"
      class="selectExample"
      label="Description"
      multiple
      v-model="select4"
      >
      <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in exampleOptions" />
    </vs-select>
  </div>
</template>

<script>
export default {
  name:'',
  data(){
    return {
      select1Normal:'',
      select1:[],
      select2:[],
      select3:[],
      select4:[],
      exampleOptions:[
        {text: 'Square', value: 1},
        {text: 'Rectangle', value: 2},
        {text: 'Rombo', value: 3},
        {text: 'Romboid', value: 4},
        {text: 'Trapeze', value: 5},
        {text: 'Triangle', value: 6},
        {text: 'Polygon', value: 7},
        {text: 'Regular polygon', value: 8},
        {text: 'Circumference', value: 9},
        {text: 'Circle', value: 10},
        {text: 'Circular sector', value: 11},
        {text: 'Circular trapeze', value: 12},
      ]
    }
  }
}
</script>

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

Figuras

Group items

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

Defautl

Multiple

Autocomplete

<template lang="html">
  <div class="con-select-example">
    <vs-select
        class="selectExample"
        label="Default"
        v-model="select1"
        >
        <div :key="index" v-for="item,index in options1">
          <vs-select-group :title="item.title" v-if="item.group">
            <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in item.group"/>
          </vs-select-group>
        </div>
    </vs-select>
    <vs-select
        multiple
        class="selectExample"
        label="Multiple"
        v-model="select2"
        >
        <div :key="index" v-for="item,index in options2">
          <vs-select-group :title="item.title" v-if="item.group">
            <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in item.group"/>
          </vs-select-group>
        </div>
    </vs-select>
    <vs-select
        autocomplete
        class="selectExample"
        label="Autocomplete"
        v-model="select3"
        >
        <div :key="index" v-for="item,index in options3">
          <vs-select-group :title="item.title" v-if="item.group">
            <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="item,index in item.group"/>
          </vs-select-group>
        </div>
    </vs-select>
  </div>
</template>

<script>
export default {
  data(){
    return {
      select1:6,
      select2:[6],
      select3:['red'],
      options1:[
        {
          title:'Figures',
          group:[
            {text: 'Romboid', value: 4},
            {text: 'Trapeze', value: 5},
            {text: 'Triangle', value: 6},
            {text: 'Polygon', value: 7},
          ]
        },
        {
          title:'Colors',
          group:[
            {text: 'Red', value: 'red'},
            {text: 'Green', value: 'green'},
            {text: 'Blue', value: 'blue'},
            {text: 'Purple', value: 'purple'},
          ]
        }
      ],
      options2:[
        {
          title:'Figures',
          group:[
            {text: 'Romboid', value: 4},
            {text: 'Trapeze', value: 5},
            {text: 'Triangle', value: 6},
            {text: 'Polygon', value: 7},
          ]
        },
        {
          title:'Colors',
          group:[
            {text: 'Red', value: 'red'},
            {text: 'Green', value: 'green'},
            {text: 'Blue', value: 'blue'},
            {text: 'Purple', value: 'purple'},
          ]
        }
      ],
      options3:[
        {
          title:'Figures',
          group:[
            {text: 'Romboid', value: 4},
            {text: 'Trapeze', value: 5},
            {text: 'Triangle', value: 6},
            {text: 'Polygon', value: 7},
          ]
        },
        {
          title:'Colors',
          group:[
            {text: 'Red', value: 'red'},
            {text: 'Green', value: 'green'},
            {text: 'Blue', value: 'blue'},
            {text: 'Purple', value: 'purple'},
          ]
        }
      ],
    }
  },
  methods:{
    prueba(){
      console.log("prueba de focsu");
    }
  }
}
</script>

<style lang="css">
.selectExample {
  margin: 10px;
}
.con-select-example {
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-select .vs-select {
  width: 100%
}
@media (max-width: 550px) {
  .con-select {
    flex-direction: column;
  }
  .con-select .vs-select {
    width: 100%
  }
}
</style>

Width

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

Width 120px

Width 400px

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

# Select

# Single selection

# Color

# Autocomplete

# Multiple

# Labels

# Validators

# Is Selected Item

# Group items

Figures

Colors

Figures

Colors

Figures

Colors

# Width

Select

Single selection

Color

Autocomplete

Multiple

Labels

Validators

Is Selected Item

Group items

Width