Select

# Select

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Add a select element with the vs-select component and the vs-option sub component

Code copied

# Color

Change the color of the component with the color property, the allowed values ​​are the main colors of vuesax and the colors (RGB and HEX)

Code copied

# Label

Add a label to the select easily with the label property, you can also add a label-placeholder which as its name says is a placeholder that encourages label, and finally the placeholder with the placeholder property

Code copied

# Group

Group options within the select with the sub-component vs-option-group, as the required slot is the title to add a title to the item group

Code copied

# Filter New

You can add the functionality of filtering options with the filter property, this property is a boolean so you can add it without any value

Code copied

# Multiple

Add the functionality of multiple selection of options with the multiple property, this property is a boolean so you can add it without any value

The value of the select must be an array

Code copied

# Loading New

Add a loading animation to the select with the loading property, this property is a boolean so you can add it without any value

Code copied

# State New

Change the style of the component to the color passed in the state property, the allowed colors are only the main ones of vuesax

This property can be used to indicate a missing field to the user or when something is ready.

Code copied

# Message New

Add an item below the select showing a message to the user

Option Valid
Required
Select your country where you are currently
Code copied

# API

props

Property Type Values Description default Example More
color String Main colors of vuesax RGB HEX Change the color of the component. primary Usage Open Close 
<template>
  <div class="center con-selects">
    <vs-select
      v-for="(color, i) in colors"
      :key="i"
      :color="color.color"
      placeholder="Select"
      v-model="color.value"
    >
      <vs-option label="Vuesax" value="1">
        Vuesax
      </vs-option>
      <vs-option label="Vue" value="2">
        Vue
      </vs-option>
      <vs-option label="Javascript" value="3">
        Javascript
      </vs-option>
      <vs-option label="Sass" value="4">
        Sass
      </vs-option>
      <vs-option label="Typescript" value="5">
        Typescript
      </vs-option>
      <vs-option label="Webpack" value="6">
        Webpack
      </vs-option>
      <vs-option label="Nodejs" value="7">
        Nodejs
      </vs-option>
    </vs-select>
  </div>
</template> <script> export default {
  data:() => ({
    colors: [
      {
        color: 'danger',
        value: '1'
      },
      {
        color: 'success',
        value: '2'
      },
      {
        color: 'warn',
        value: '3'
      },
      {
        color: 'dark',
        value: '4'
      },
      {
        color: '#7d33ff',
        value: '5'
      },
      {
        color: 'rgb(59,222,200)',
        value: '6'
      },

    ]
  })
} </script>
loading Boolean true false Determine if the component is in the loading state and add an animation. false Usage Open Close 
<vs-select
  placeholder="Success"
  v-model="value1"
  loading
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
placeholder String String Add a placeholder to the component. Usage Open Close 
<vs-select placeholder="Select" v-model="value">
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option disabled label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
label String String Add a label to the composite select. Usage Open Close 
<vs-select
  label="Label"
  v-model="value1"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
label-placeholder String String Add a placeholder that when in focus or with value becomes a label. Usage Open Close 
<vs-select
  label-placeholder="Label-placeholder"
  v-model="value2"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
filter Boolean true false Add the functionality to filter the select options. false Usage Open Close 
<vs-select
  filter
  placeholder="Filter"
  v-model="value"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
multiple Boolean true false Add the functionality of being able to select several options from a select. false Usage Open Close 
<vs-select
  label="Multiple"
  multiple
  placeholder="Filter"
  v-model="value"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
state String Vuesax main colors Change the state of the component to the color provided. false Usage Open Close 
<vs-select
  v-for="(color, i) in colors"
  :key="i"
  :state="color.color"
  :label="color.color"
  placeholder="Select"
  v-model="color.value"
  >
    <vs-option label="Vuesax" value="1">
      Vuesax
    </vs-option>
    <vs-option label="Vue" value="2">
      Vue
    </vs-option>
    <vs-option label="Javascript" value="3">
      Javascript
    </vs-option>
    <vs-option label="Sass" value="4">
      Sass
    </vs-option>
    <vs-option label="Typescript" value="5">
      Typescript
    </vs-option>
    <vs-option label="Webpack" value="6">
      Webpack
    </vs-option>
    <vs-option label="Nodejs" value="7">
      Nodejs
    </vs-option>
    </vs-select>
  </div>
</template>
disabled Boolean true false Determine if the component is in the disabled state. false Open Close 
<vs-select
  disabled
  placeholder="Success"
  v-model="value1"
>
  <template #message-success>
    Option Valid
  </template>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
collapse-chips Boolean true false Determine if the chips in multiple are reduced to 2 elements. false Usage Open Close 
<vs-select
  label="Multiple collapse chips"
  filter
  multiple
  collapse-chips
  placeholder="Collapse chips"
  v-model="value3"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>

slots

Property Type Values Description default Example More
message-{color} slot Add a message below the select. Usage Open Close 
<vs-select
  placeholder="Success"
  v-model="value1"
>
  <template #message-success>
    Option Valid
  </template>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
title slot The vs-option-group component adds a title to the option group. Usage Open Close 
<vs-select
  label="Group"
  placeholder="Group"
  v-model="value1"
>
  <vs-option-group>
    <div slot="title">
      Vuejs
    </div>
    <vs-option label="Vuesax" value="1">
      Vuesax
    </vs-option>
    <vs-option label="Vue" value="2">
      Vue
    </vs-option>
    <vs-option label="Javascript" value="3">
      Javascript
    </vs-option>
  </vs-option-group>
  <vs-option-group>
    <div slot="title">
      Others
    </div>
    <vs-option label="Sass" value="4">
      Sass
    </vs-option>
    <vs-option label="Typescript" value="5">
      Typescript
    </vs-option>
    <vs-option label="Webpack" value="6">
      Webpack
    </vs-option>
    <vs-option label="Nodejs" value="7">
      Nodejs
    </vs-option>
  </vs-option-group>
</vs-select>
Last Updated: 1/30/2020, 8:38:50 AM

Avatar