All Components

Keyboard Navigation

The keyboard navigation of the ColorPicker is always available.

The palette-based ColorPicker supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Enter or Down Arrow Opens the popup (if closed).
Left Arrow Selects the previous color.
Right Arrow Selects the next color.
Up Arrow or Down Arrow Moves one row up or down.
Esc`` Cancels the selection.

The HSV ColorPicker supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Enter or Down Arrow Opens the popup (if closed).
Arrows Updates the saturation or value in the big rectangle.
Ctrl+Left Arrow and Ctrl+Right Arrow Updates the hue slider.
Ctrl+Up Arrow and Ctrl+Down Arrow Updates the opacity slider.
Shift (Holding) Fine-tunes.
Enter Selects the current color.
Esc Cancels the selection.
<div id="vueapp" class="vue-app">
    <kendo-colorpicker v-model="color">ColorPicker</kendo-colorpicker>
</div>
Vue.use(InputsInstaller);

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