All Components

ColorPicker Overview

The ColorPicker allows the user to select a color from a drop-down menu.

It is designed to replace the <input type="color"> HTML5 tag, which is not widely supported in browsers. The original input element is kept in the DOM. The value attribute element gets updated as the user selects a color which allows the submission of forms with ColorPickers.

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

Basic Usage

The following example demonstrates the ColorPicker in action.

<div id="vueapp" class="vue-app">
    <kendo-colorpicker v-model="color">ColorPicker</kendo-colorpicker>
    color: <span v-text="color"></span>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            color: "5CE500"
        }
    }
})

Features and Functionalities

The ColorPicker allows you to enable or disable it.

Events

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

<div id="vueapp" class="vue-app">
    <kendo-colorpicker :value="color" v-on:change="onChange">ColorPicker</kendo-colorpicker>
    color: <span v-text="color"></span>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            color: "5CE500"
        }
    },
    methods: {
        onChange (ev) {
            this.color = ev.sender.value()
        }
    }
})
In this article