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.

The ColorPicker Component is part of Kendo UI for Vue, a professional grade UI library with 90+ 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 ColorPicker in action.

View Source
Edit In Stackblitz  
Change Theme:

Functionality and Features


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>

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