KendoReact

React FlatColorPicker

  • Helps you add a Color Picker component right on the page (instead of in a popup) and comes with customizable header and footer.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.

Overview

The new KendoReact FlatColorPicker component adds another option for your users to select colors in React applications. It provides a flat view for the React ColorGradient and the React ColorPalette components and adds a header and footer. Unlike the React ColorPicker component, the React FlatColorPicker is not rendered within a popup or dropdown but immediately to the page.

See React FlatColorPicker Component demo

React FlatColorPicker Component

Disabled FlatColorPicker

For scenarios that require the React FlatColorPicker to prevent user interactions, this component can switch between being enabled (fully operational) or disabled (prevent user interactions) through a single configuration option. The disabled state also automatically updates the appearance of the React TextArea component to ensure there is a clear visual cue for users that the UI element is not active.

See Disabled React FlatColorPicker Component demo

React FlatColorPicker Component in disabled state

Make the React FlatColorPicker your own with a variety of out-of-the-box customization options. You can customize what elements to appear in the header and the footer of the component as well as hide them completely. Having a footer comes in handy when you want to enrich the interactivity of the FlatColorPicker, for example by adding buttons. If that’s not part of the requirements, you can simply hide the footer area altogether.

See React FlatColorPicker Component demo: Customization

React FlatColorPicker Component Customization

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.