Examples

Basic Select

Single Select

Pick a fruit

▼

Selected:

<script setup>
import { ref } from 'vue'
import { VSelect } from '@vue-select-plus/vue'
import '@vue-select-plus/styles'

const value = ref(null)
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' }
]
</script>

<template>
  <VSelect 
    v-model="value" 
    :options="options" 
    label="Single Select"
    placeholder="Pick a fruit"
  />
</template>

Multi Select

Multi Select

Apple Banana

▼

Selected: [ "apple", "banana" ]

<script setup>
import { ref } from 'vue'
import { VSelect } from '@vue-select-plus/vue'

const value = ref(['apple'])
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' }
]
</script>

<template>
  <VSelect 
    v-model="value" 
    :options="options" 
    multiple
    label="Multi Select" 
  />
</template>

Searchable

Filter Fruits

Type to search...

▼

Selected:

<script setup>
import { ref } from 'vue'
import { VSelect } from '@vue-select-plus/vue'

const value = ref(null)
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' }
]
</script>

<template>
  <VSelect 
    v-model="value" 
    :options="options" 
    searchable
    label="Filter Fruits" 
  />
</template>

Disabled & Error

Disabled Prop

Cannot select

▼

Error Prop

Select...

▼

This field is required

<template>
  <VSelect disabled label="Disabled" />
  
  <VSelect 
    error="Field required" 
    label="Error State" 
  />
</template>

Custom Slots

Custom Option Slot

Select...

▼

Selected:

<template>
  <VSelect :options="fruits" :item-height="60" label="Custom Slot">
    <template #option="{ option }">
       <span class="my-option">
          <strong>{{ option.label }}</strong>
          <small>{{ option.value }}</small>
       </span>
    </template>
  </VSelect>
</template>

Creator Mode

Add Child Items

Select or Create...

▼

Selected:

Click small '+' button on groups to add children.

<script setup>
import { ref } from 'vue'
import { VSelect } from '@vue-select-plus/vue'

const value = ref(null)
const options = ref([
  { 
    label: 'Backend', 
    value: 'be', 
    children: [
      { label: 'Node.js', value: 'node' }
    ] 
  },
  { 
    label: 'Frontend', 
    value: 'fe', 
    children: [
      { label: 'Vue.js', value: 'vue' }
    ] 
  }
])

function handleCreate({ parent, value }) {
  const group = options.value.find(o => o.value === parent)
  if (group) {
    if (!group.children) group.children = []
    group.children.push({ 
        label: value, 
        value: value.toLowerCase() 
    })
  }
}
</script>

<template>
  <VSelect 
    v-model="value" 
    :options="options" 
    @create="handleCreate" 
    label="Creator Mode" 
  />
</template>

API Reference

For a full list of props and events, see the API Reference.