Select

Component source on Github This page on Github

Reference

This component also allows props of v-input . See documentation here.

v-modelundefined
StringObjectBooleanNumber
Select v-model. If the items are objects model returns the value property (or an array of values if the select is in multi-value mode) instead of the whole object
auto-placementfalse
Boolean
Automatically calculates best placement for floating element
autocompletefalse
Boolean
Enables filtering of items based on input's value. You can also use v-autocomplete which is a wrapper for v-select with this prop enabled by default
base"select"
String
Base name used to style component
card
(attributes)
{}
Object
Attributes of the v-card component used as the menu container
chevron
(attributes)
{}
Object
Attributes of the v-chevron component
clearablefalse
Boolean
Adds an 'X' button that resets model to the default value
empty-data-message"No data available"
String
Message to display in the menu when the items array is empty
filter-keys[]
Array
By default text property is used to filter items. You can set different properties by adding them to this prop.
fliptrue
Boolean
Allows fliping dropdown to opposite placement if outside of current view
input
(attributes)
{}
Object
Attributes of the v-input component
item-text"text"
String
Sets the name of the property that holds the text of the item.
item-value"value"
String
Sets the name of the property that holds the value of the item.
items[]
Array
Items to display can be an array of strings, objects or a mix of both. If using objects, they should have at least text and value properties. If the objects have additional properties, you can display them using the item slot
items-per-page10
Number
Number of items to display per page. Use 0 to display all items on a single page. This setting is ignored if no-pagination is enabled
max-multiple9999
Number
Maximum number of rendered items for a multiple select. If there are more items, the max-multiple slot can be used to display additional information
mod-itemempty string
String
Style of the menu item element
multiplefalse
Boolean
Allows selecting multiple values
nameempty string
String
Name of the component
no-filterfalse
Boolean
Disables the internal filter in autocomplete mode. Provide filtered items by updating the items prop
no-paginationfalse
Boolean
Disables the internal pagination. You can paginate items by updating the items prop
offset-x0
Number
Offset of dropdown relative to reference element. See how to use this offset here
offset-y5
Number
Offset of dropdown relative to reference element. See how to use this offset here
placement"bottom-start"
String
Initial placement of dropdown content. See valid values in FloatingUI documentation
transition"fade-scale"
String
Sets an animation effect when showing or hiding autocomplete menu. Valid values are: 'fade' or empty string to disable animations. Animation speed can be set in the --autocomplete-transition-duration css variable.
use-loadertrue
Boolean
Enables the spinner in the input
variantempty string
String
Active variant of the element mod-* props
Events

This component also emits events of v-input . See documentation here.

update:modelValue
Updates v-model of component
update:page
Fired when next page is displayed (scroll reach end of dropdown menu)
input:value
Fired when input value changes
state:opened
Dropdown menu opens
state:closed
Dropdown menu closes
Slots

This component also allows slots of v-input . See documentation here.

selected-item
Slot for the custom selected items
max-multiple
Content of this slot is appended to the selected items if the max-multiple prop is enabled
menu-item
Slot for the menu item. Slot props: text, value, item, inputValue
menu-append
Slot for the additional content below menu items

Notes

Autocomplete

Enable autocomplete mode with the autocomplete prop. You can also use v-autocomplete component which is just v-select with autocomplete automatically turned on. In autocomplete mode no-filter, no-pagination and is-loading props can be used when requesting data from API.

Example - simple select

v-model: 
    <template>
  <div class="flex flex-col md:flex-row md:items-center">
    <div class="w-full md:w-1/2">
      <v-select
        v-model="example.model"
        :items="example.items"
      ></v-select>
    </div>
    <div class="md:ml-10 mt-6 md:mt-0">
      <span class="font-semibold">v-model:</span>
      {{ example.model }}
    </div>
  </div>
</template>
  

    
  

  
    <script setup>
import { reactive } from "vue";
import { languages } from "../example-data/data.js";

let example = reactive({
  model: "",
  items: languages,
});
</script>

Example - simple select (multiple)

v-model: []
    <template>
  <div class="flex flex-col md:flex-row md:items-center">
    <div class="w-full md:w-1/2">
      <v-select
        v-model="example.model"
        :items="example.items"
        multiple
      ></v-select>
    </div>
    <div class="w-1/2 md:ml-10 mt-6 md:mt-0">
      <span class="font-semibold">v-model:</span>
      {{ example.model }}
    </div>
  </div>
</template>
  

    
  

  
    <script setup>
import { reactive } from "vue";
import { languages } from "../example-data/data.js";

let example = reactive({
  model: [],
  items: languages,
});
</script>

Example - autocomplete

This example uses no-filter prop and simple mock of API request. It does not perform local autocompletion, instead items prop is replaced or updated with new set of items after input event.

v-model: 
    <template>
  <div class="flex flex-col md:flex-row md:items-center">
    <div class="w-full md:w-1/2">
      <v-autocomplete
        v-model="example.model"
        no-filter
        :items="example.items"
        :state="example.state"
        :is-loading="example.isLoading"
        @input:value="query($event)"
        v-on="handleExampleEvents"
      ></v-autocomplete>
    </div>
    <div class="md:ml-10 mt-6 md:mt-0">
      <span class="font-semibold">v-model:</span>
      {{ example.model }}
    </div>
  </div>
</template>
  

    
  

  
    <script setup>
import { ref, reactive } from "vue";
import { states } from "../example-data/data.js";

let example = reactive({
  model: "",
  items: [],
});

let query = (q) => {
  if (q === "") return example.items;
  example.isLoading = true;
  setTimeout(() => {
    example.items = states.filter((e) => {
      return (e.text || "").toLowerCase().indexOf((q || "").toLowerCase()) > -1;
    });
    example.isLoading = false;
  }, 500);
};

let events = ref([]);

let handleExampleEvents = {
  ["update:page"]: (event) =>
    events.value.unshift({ ev: "update:page", data: event }),
  ["state:focus"]: (event) =>
    events.value.unshift({ ev: "state:focus", data: event }),
  ["state:opened"]: (event) =>
    events.value.unshift({ ev: "state:opened", data: event }),
  ["state:closed"]: (event) =>
    events.value.unshift({ ev: "state:closed", data: event }),
  ["input:value"]: (event) =>
    events.value.unshift({ ev: "input:value", data: event }),
};
</script>

Example - autocomplete (multiple with chips)

Example of multi value autocomplete that uses v-chip components to display selected values.

v-model: []
    <template>
  <div class="flex flex-col md:flex-row md:items-center">
    <div class="w-full md:w-1/2">
      <v-autocomplete
        v-model="example.model"
        no-filter
        multiple
        :items="example.items"
        :is-loading="example.isLoading"
        @input:value="query($event)"
      >
        <template #selected-item="{ item }">
          <v-chip
            class="my-1 mr-2"
            @click:close-button="remove(item.value)"
          >
            {{ item.text }}
          </v-chip>
        </template>
      </v-autocomplete>
    </div>
    <div class="w-full md:w-1/2 md:ml-10 mt-6 md:mt-0">
      <span class="font-semibold">v-model:</span>
      {{ example.model }}
    </div>
  </div>
</template>
  

    
  

  
    <script setup>
import { reactive } from "vue";
import { states } from "../example-data/data.js";

let example = reactive({
  model: [],
  items: [],
  isLoading: false,
});

let query = (q) => {
  if (q === "") return example.items;
  example.isLoading = true;
  setTimeout(() => {
    example.items = states.filter((e) => {
      return (e.text || "").toLowerCase().indexOf((q || "").toLowerCase()) > -1;
    });
    example.isLoading = false;
  }, 500);
};

let remove = (item) => {
  const index = example.model.indexOf(item);
  if (index >= 0) example.model.splice(index, 1);
};
</script>

Example - autocomplete (Wikipedia API)

v-model: 
    <template>
  <div class="flex items-center">
    <div class="w-1/2">
      <v-autocomplete
        v-model="example.model"
        no-filter
        item-text="title"
        item-value="pageid"
        :items="example.items"
        :state="example.state"
        :is-loading="example.isLoading"
        :offset-y="0"
        :input="{ base: 'underlinedInput' }"
        @input:value="debouncedQuery($event)"
      ></v-autocomplete>
    </div>
    <div class="ml-10">
      <span class="font-semibold">v-model:</span>
      {{ example.model }}
    </div>
  </div>

  <v-card
    v-if="current"
    mod-card="shape:square border:borderless"
    class="p-4 mt-6"
  >
    <ul>
      <li>
        <span class="font-semibold">
          {{ current.title }}
        </span>
      </li>
      <li class="my-4">
        <a
          :href="`https://en.wikipedia.org/?curid=${current.pageid}`"
          class="link"
        >
          {{ `https://en.wikipedia.org/?curid=${current.pageid}` }}
        </a>
      </li>
    </ul>
    <iframe
      v-if="current"
      :src="`https://en.wikipedia.org/?curid=${current.pageid}`"
      frameborder="0"
      class="w-full h-[600px]"
    ></iframe>
  </v-card>
</template>
  

    
  

  
    <script setup>
import { reactive, computed } from "vue";
import { debounce } from "../../tools.js";

let example = reactive({
  model: "",
  items: [],
});

const urlWiki =
  "https://en.wikipedia.org/w/api.php?action=query&format=json&list=prefixsearch&formatversion=2&origin=*&pssearch=";

let current = computed(() => {
  return example.items.find((i) => i.pageid === example.model);
});

let query = async (q) => {
  if (q === "") return example.items;

  example.isLoading = true;

  let res = await fetch(`${urlWiki}${q}`)
  let data = await res.json()
  example.items = data.query.prefixsearch
  example.isLoading = false;
};

let debouncedQuery = debounce(query, 300);
</script>

Example - autocomplete (customized menu)

To customize menu items use item slot.

v-model: 
    <template>
  <div class="flex items-center">
    <div class="w-1/2">
      <v-autocomplete
        v-model="example.model"
        :items="example.items"
        :is-loading="example.isLoading"
        item-text="full_name"
        item-value="id"
        no-filter
        @input:value="query($event)"
      >
        <template #menu-item="{ item, isSelected, highlight }">
          <div class="flex justify-between">
            <div
              v-html="
                isSelected ? item['full_name'] : highlight(item['full_name'])
              "
            ></div>
            <div class="text-xs">{{ item.department }}</div>
          </div>
          <span class="text-sm font-semibold">
            {{ item.title }}
          </span>
        </template>
      </v-autocomplete>
    </div>
    <div class="ml-10 w-1/2">
      <span class="font-semibold">v-model:</span>
      {{ example.model }}
    </div>
  </div>
</template>
  

    
  

  
    <script setup>
import { reactive } from "vue";
import company from "../example-data/company.json";

let example = reactive({
  model: "",
  items: [],
  isLoading: false,
});

let query = (q) => {
  if (q === "") return;
  example.isLoading = true;
  setTimeout(() => {
    example.items = company.filter((e) => {
      return (
        (e["full_name"] || "").toLowerCase().indexOf((q || "").toLowerCase()) >
        -1
      );
    });
    example.isLoading = false;
  }, 500);
};
</script>

Example - select (max multiple limit)

max-multiple prop sets the max number of selected items shown in the input. In the following example max-multiple slot is used to show the number of remaining hidden items.

v-model: []
    <template>
  <div class="flex flex-col md:flex-row md:items-center">
    <div class="w-full md:w-1/2">
      <v-select
        v-model="example.model"
        :items="example.items"
        multiple
        :max-multiple="2"
      >
        <template #max-multiple>
          (+{{ example.model.length - 2}} others)
        </template>
      </v-select>
    </div>
    <div class="w-1/2 md:ml-10 mt-6 md:mt-0">
      <span class="font-semibold">v-model:</span>
      {{ example.model }}
    </div>
  </div>
</template>
  

    
  

  
    <script setup>
import { reactive } from "vue";
import { languages } from "../example-data/data.js";

let example = reactive({
  model: [],
  items: languages,
});
</script>