Inputs / ColorPicker / Getting Started
material theme

Getting Started with KendoReact ColorPicker

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 ColorPicker component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Basic Usage

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { ColorPicker } from '@progress/kendo-react-inputs';

class App extends React.Component {
    render() {
        return (
            <div className="row">
                <div className="m-3">
                    <p>ColorPicker with predefined colors</p>
                    <ColorPicker view="palette" defaultValue={'rgba(237, 126, 50, 1)'} />
                </div>
                <div className="m-3">
                    <p>ColorPicker with gradient</p>
                    <ColorPicker view="gradient" defaultValue={'green'} />
                </div>
            </div >
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Functionality and Features

Is this article helpful?

Not finding the help you need?

Contact Support