You’re currently viewing documentation for our jQuery wrappers.This product reached EOL in May, 2024. To ensure smoother transition we provide support till May, 2025. Check here details and migration guidelines.

ComboBox Overview

The ComboBox is a richer version of the <select> element and allows the user to choose from a list of options or enter custom values through the keyboard.

The ComboBox wrapper for Vue is a client-side wrapper for the Kendo UI ComboBox widget.

The DropDowns Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates the ComboBox in action.

View Source
Change Theme:

Functionality and Features


The following example demonstrates basic ComboBox events. You can subscribe to all ComboBox events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-combobox :data-source="dataSourceArray"
                    :placeholder="'Select country...'"

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { text: 'Albania', value: '1' },
                { text: 'Andorra', value: '2' },
                { text: 'Armenia', value: '3' },
                { text: 'Austria', value: '4' },
                { text: 'Azerbaijan', value: '5' },
                { text: 'Belarus', value: '6' },
                { text: 'Belgium', value: '7' }
    methods: {
        onChange: function(e) {
            console.log("Event :: change");
        onClose: function(e) {
            console.log("Event :: close");
        onDataBound: function(e) {
            console.log("Event :: dataBound");
        onFiltering: function(e) {
            console.log("Event :: filtering");
        onOpen: function(e) {
            console.log("Event :: open");
        onSelect: function(e) {
            console.log("Event :: select");
        onCascade: function(e) {
            console.log("Event :: cascade")