KendoReact ColorPicker Overview

The ColorPicker enables the user to select and submit color values.

The ColorPicker is designed to replace the <input type="color"> HTML5 tag which is not widely supported in browsers.


The following example demonstrates the ColorPicker with the palette and with gradient popup view in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

The ColorPicker is part of the KendoReact Inputs component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the ColorPicker and the rest of the components in the package, see the Getting Started with the KendoReact Inputs guide.

Key Features

  • Disabled ColorPickerYou can render a disabled ColorPicker and keep it disabled until certain requirements are met.
  • Controlled modeTake advantage of the built-in options that allow you to control the value of the ColorPicker.
  • Default valueYou can set an initial value for the ColorPicker.
  • ViewsYou can configure the ColorPicker to render a color gradient, a color palette, or a combination of both.
  • Custom ColorPickerThe built-in appearance customization options allow you to adjust the palette and gradient popup to your specific requirements.
  • Keyboard navigationThe ColorPicker supports numerous keyboard shortcuts that allow users to interact with the component.

In this article

Not finding the help you need?