KendoReact

React ColorPalette

  • Give the user a handy interface to select from available color options. Supports both controlled and uncontrolled mode.
  • 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 KendoReact ColorPalette can render all colors and color presets, making it ideal when we have to present the user with all available color options. This React component is a great addition to any shopping site enabling the user to easily visualize and choose a color.

    See React ColorPalette Overview demo

    React ColorPalette - Overview, KendoReact UI Library
  • Disabled ColorPalette

    The component is great for picking colors, but sometimes we need to prevent the selection until specific criteria are met. For these cases, the React ColorPalette can be disabled on the fly, and then dynamically enabled when needed.

    See React ColorPalette Disabled demo

    React ColorPalette - Disabled, KendoReact UI Library
  • ColorPalette Presets

    Rendering a specific color preset is available out of the box. This can save time and code by enabling developers to set just the name of the color preset instead of setting each color individually.

    See React ColorPalette Presets demo

    React ColorPalette - Presets, KendoReact UI Library
  • Controlled and Uncontrolled modes

    Following the React standard for input type elements, the KendoReact ColorPalette supports both controlled and uncontrolled mode. This allows it to dynamically update other components on the page, if needed, when the value is changed.

    See React ColorPalette Controlled and Uncontrolled modes demo

  • Keyboard Navigation

    The keyboard navigation makes it very accessible by allowing the component the be fully operated using only the keyboard. The arrow keys will go over each available color, and pressing the Enter key will select the chosen color.

    See React ColorPalette 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.