KendoReact

React ColorPicker

  • Offer interactive UX with a predefined palette or a gradient color selector. You can also display current contrast ratio and AA/AAA contrast ratio compliance.
  • 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 React ColorPicker provides users with an intuitive way of selecting and submitting color values. With support for both a predefined color palette, as well as a gradient color selector, the KendoReact ColorPicker can fit any requirements for selecting colors in your React applications.

    See React ColorPicker Overview demo

    React ColorPicker - Overview, KendoReact UI Library
  • Disabled ColorPicker

    By default, the KendoReact ColorPicker is enabled and can be interacted with immediately. However, some scenarios may need the React ColorPicker to be in a disabled state and prevent user interaction until certain requirements are met.

    See React ColorPicker Disabled demo

    React ColorPicker - Disabled, KendoReact UI Library
  • Default Value

    When initially added to a React application, the KendoReact ColorPicker renders without an initial value. For scenarios that require a value to be bound to the ColorPicker to display on page render, this can be done by simply setting the default value.

    See React ColorPicker Default Value demo

    React ColorPicker - Default Value, KendoReact UI Library
  • View Types

    The KendoReact ColorPicker allows users to pick colors from either a color gradient, which provides an interactive way to select a color by dragging a pointer around a gradient, or a color palette which contains predefined colors in a palette.

    See React ColorPicker View Types demo

    React ColorPicker - View Types, KendoReact UI Library
  • Controlled and Uncontrolled Modes

    To ensure that the KendoReact ColorPicker component can fit in any React application, the ColorPicker supports both controlled and uncontrolled modes. This lets the React ColorPicker either maintain its own state, or have its state controlled by the developer.

    See React ColorPicker Controlled and Uncontrolled Modes demo

  • Contrast Color Tool

    When enabled, the React ColorPicker contrast color feature suggests a secondary color that contrasts the main color users have selected. Primarily serving accessibility enablement the KendoReact ColorPicker will display the current contrast ratio and indicate whether the contrast color is compliant with an AA or AAA contrast ratio.

    See React ColorPicker Contrast Color Tool demo

    React ColorPicker Contrast Color
  • Custom Rendering

    For scenarios that require more personalization, the KendoReact ColorPicker has several options for customizing its appearance. This includes the palette and gradient popups, as well as adding custom icons to the component’s input element.

    See React ColorPicker Custom Rendering demo

    React ColorPicker - Custom Rendering, KendoReact UI Library
  • Keyboard Navigation

    Every aspect of the KendoReact ColorPicker can be navigated through using keyboard navigation, ensuring that end users can focus the component and quickly select colors, without having to use a mouse.

    See React ColorPicker Keyboard Navigation demo

All KendoReact Components

waves bg

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.