ColorPicker

ColorPicker is an input component to select a color.

Import#


import { ColorPicker } from 'primereact/colorpicker';

Basic#

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


<ColorPicker value={color} onChange={(e) => setColor(e.value)} />

Inline#

ColorPicker is displayed as a popup by default, add inline property to customize this behavior.


<ColorPicker value={color} onChange={(e) => setColor(e.value)} inline />

Format#

Default color format to use in value binding is hex and other possible values can be rgb and hsb using the format property.

HEX

6466f1

RGB

{"r":100,"g":102,"b":241}

HSB

{"h":239,"s":59,"b":95}


<ColorPicker format="hex" value={colorHEX} onChange={(e) => setColorHEX(e.value)} />
<ColorPicker format="rgb" value={colorRGB} onChange={(e) => setColorRGB(e.value)} />
<ColorPicker format="hsb" value={colorHSB} onChange={(e) => setColorHSB(e.value)} />

Disabled#

When disabled is present, the element cannot be edited and focused.


<ColorPicker disabled />

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.


<Toast ref={toast} />
<ColorPicker
    id="color"
    name="color"
    value={formik.values.color}
    className={classNames({ 'p-invalid': isFormFieldInvalid('item') })}
    onChange={(e) => {
        formik.setFieldValue('color', e.value);
    }}
/>
{getFormErrorMessage('color')}
<Button type="submit" label="Submit" />

Hook Form#

React Hook Form is another popular React library to handle forms.


<Toast ref={toast} />
<Controller
name="color"
control={control}
    rules={{ required: 'Color is required.' }}
    render={({ field, fieldState }) => <ColorPicker name="color" control={control} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.value)} />}
    />
    {getFormErrorMessage('color')}
<Button type="submit" label="Submit" />

Style#

Following is the list of structural style classes

Name	Element
p-colorpicker	Container element.
p-colorpicker-overlay	Container element in overlay mode.
p-colorpicker-preview	Preview input in overlay mode.
p-colorpicker-panel	Panel element of the colorpicker.
p-colorpicker-content	Wrapper that contains color and hue sections.
p-colorpicker-color-selector	Color selector container.
p-colorpicker-color	Color element.
p-colorpicker-color-handle	Handle of the color element.
p-colorpicker-hue	Hue slider.
p-colorpicker-hue-handle	Handle of the hue slider.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

Screen Reader

Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.

Closed State Keyboard Support of Popup ColorPicker

Key	Function
tab	Moves focus to the color picker button.
space	Opens the popup and moves focus to the color slider.

Popup Keyboard Support

Key	Function
enter	Selects the color and closes the popup.
space	Selects the color and closes the popup.
escape	Closes the popup, moves focus to the input.

Color Picker Slider

Key	Function
arrow keys	Changes color.

Hue Slider

Key	Function
up arrowdown arrow	Changes hue.