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.

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={'blue'} />
                </div>
                <div className="m-3">
                    <p>ColorPicker with gradient</p>
                    <ColorPicker view="gradient" defaultValue={'green'} />
                </div>
            </div >
        );
    }
}

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