Components / Inputs / ColorPicker

Keyboard Navigation

The keyboard navigation of the ColorPicker is always available.

The ColorPicker supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Down Arrow & Enter Opens the popup.
Escape Closes the popup.
Enter Selects the focused item and closes the popup.
Down Arrow Moves the focus to the next cell down.
Up Arrow Moves the focus to the next cell up.
Right Arrow Moves the focus to the next cell right.
Left Arrow Moves the focus to the next cell left. 
@Component({
    selector: 'my-app',
    template: `
    <div class="wrapper">
        <kendo-colorpicker
            [view]="'palette'"
            [paletteSettings]="settings"
        >
        </kendo-colorpicker>
        <kendo-colorpalette
            [palette]="settings.palette"
            [columns]="settings.columns"
            [tileSize]="settings.tileSize"
        >
        </kendo-colorpalette>
    </div>
    `,
    styles: [`
        .wrapper {
            display: flex;
            justify-content: center;
        }
        .wrapper::after {
            content: "";
            position: absolute;
            top: 10%;
            left: 50%;
            height: 80%;
            border-right: 1px solid lightgrey;
            box-shadow: 0 0 2px lightgrey;
        }
        .k-colorpicker {
            margin-right: 10rem;
            height: 100%;
        }
    `]
})
class AppComponent {
    public settings: PaletteSettings = {
        palette: [
            '#f0d0c9', '#e2a293', '#d4735e', '#65281a','#eddfda',
            '#dcc0b6', '#cba092', '#7b4b3a', '#fcecd5', '#f9d9ab',
            '#f6c781', '#c87d0e', '#e1dca5', '#d0c974', '#a29a36',
            '#514d1b', '#c6d9f0', '#8db3e2', '#548dd4', '#17265d'
        ],
        columns: 5,
        tileSize: 30
    }
}

In this article