React ColorPicker

React ColorPicker is an input component to select a color.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import {ColorPicker} from ‘primereact/colorpicker’;

React ColorPicker is an input component to select a color.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import {ColorPicker} from 'primereact/colorpicker';
Enter fullscreen mode Exit fullscreen mode

Getting Started

ColorPicker is used as a controlled input component with value and onChange properties.

<ColorPicker value={color} onChange={(e) => setColor(e.value)} />
Enter fullscreen mode Exit fullscreen mode

Formats

Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb". Example below has 3 colorpickers having default values with different formats.

<ColorPicker value={color1} onChange={(e) => setColor1(e.value)} />

<ColorPicker format="rgb" value={color2} onChange={(e) => setColor2(e.value)} />

<ColorPicker format="hsb" value={color3} onChange={(e) => setColor3(e.value)}/>
Enter fullscreen mode Exit fullscreen mode

Theming

ColorPicker supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact ColorPicker showcase for demos and documentation.


Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: