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 ColorPicker—You can render a disabled ColorPicker and keep it disabled until certain requirements are met.
- Controlled mode—Take advantage of the built-in options that allow you to control the value of the ColorPicker.
- Default value—You can set an initial value for the ColorPicker.
- Views—You can configure the ColorPicker to render a color gradient, a color palette, or a combination of both.
- Custom ColorPicker—The built-in appearance customization options allow you to adjust the palette and gradient popup to your specific requirements.
- Keyboard navigation—The ColorPicker supports numerous keyboard shortcuts that allow users to interact with the component.
