

PropertyFieldColorPicker control

This control generates a color picker that you can use inside the property pane.

PropertyFieldColorPicker

PropertyFieldColorPicker color selector

How to use this control in your solutions

1. Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency.
2. Import the following modules to your component:

import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';

1. Create a new property for your web part, for example:

export interface IPropertyControlsTestWebPartProps {
  color: string;
}

1. Add the custom property control to the groupFields of the web part property pane configuration:

PropertyFieldColorPicker('color', {
  label: 'Color',
  selectedColor: this.properties.color,
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  disabled: false,
  debounce: 1000,
  isHidden: false,
  alphaSliderHidden: false,
  style: PropertyFieldColorPickerStyle.Full,
  iconName: 'Precipitation',
  key: 'colorFieldId'
})

Implementation

The PropertyFieldColorPicker control can be configured with the following properties:

Property	Type	Required	Description
label	string	yes	Property field label displayed on top.
disabled	boolean	no	Specify if the control needs to be disabled.
debounce	number	no	Specify delay after which control value will be set.
isHidden	boolean	no	Specify if the control needs to be hidden.
selectedColor	string or IColor	no	The CSS-compatible string or an IColor object to describe the initial color
alphaSliderHidden	boolean	no	When true, the alpha slider control is hidden
showPreview	boolean	no	Whether to show color preview box.
style	PropertyFieldColorPickerStyle	no	Determines how the control is displayed (defaults to inline)
iconName	string	no	The name of the UI Fabric Font Icon to use for Inline display (defaults to Color)
valueAsObject	boolean	no	When true, the property is returned as an IColor object. When false (default), the property is returned as a CSS-compatible string
properties	any	yes	Parent web part properties, this object is use to update the property value.
onPropertyChange	function	yes	Defines a onPropertyChange function to raise when the date gets changed.
key	string	yes	An unique key that indicates the identity of this control.

Enum PropertyFieldColorPickerStyle

Name	Description
Full	Display the full control in the property pane
Inline	Display the color picker inline

Value

By default, the Color Picker returns the value as a CSS-compatible string. This allows you the flexibility of simply assigning the value to an inline style as is and this is usually sufficient. However, this also limits the information directly available to you since the format could be a Hex code, an RGBA value, or even a named color and may not be suitable for advanced scenarios.

By setting the valueAsObject property to true, you will always receive a consistent IColor object that provides you detailed information about the chosen color. Here are the properties available in the IColor object:

Property	Type	Description
str	string	CSS-compatible string (this is the same value that would normally be returned when valueAsObject is false)
hex	string	Hex value (does not reflect alpha)
r	number	Red
g	number	Green
b	number	Blue
h	number	Hue
s	number	Saturation
v	number	Value