Skip to main content

Colorpicker properties


type: "colorpicker",
name?: string,
id?: string,
value?: string,

css?: string,
disabled?: boolean, // false by default
editable?: boolean, // false by default
height?: string | number | "content", // "content" by default
hidden?: boolean, // false by default
padding?: string | number, // "8px" by default
required?: boolean, // false by default
validation?: (value: string) => boolean,
width?: string | number | "content", // "content" by default

customColors?: string[],
grayShades?: boolean, // true by default
icon?: string,
mode?: "palette" | "picker", // "palette" by default
palette?: string[][],
paletteOnly?: boolean, // false by default
pickerOnly?: boolean, // false by default
placeholder?: string,

hiddenLabel?: boolean, // false by default
label?: string,
labelPosition?: "left" | "top", // "top" by default
labelWidth?: string | number,

helpMessage?: string,
preMessage?: string,
successMessage?: string,
errorMessage?: string,


type(required) the type of a control, set it to "colorpicker"
name(optional) the name of a control
id(optional) the id of a control, auto-generated if not set
value(optional) the value of a colorpicker
css(optional) adds style classes to a control
disabled(optional) defines whether a control is enabled (false) or disabled (true), false by default
editable(optional) allows a user to enter the value of the control manually, false by default
height(optional) the height of a control, "content" by default
hidden(optional) defines whether a control is hidden, false by default
padding(optional) sets padding between a cell and a border of the ColorPicker control, "8px" by default
required(optional) defines whether a control is required, false by default
validation(optional) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
width(optional) the width of a control, "content" by default
customColors(optional) shows a section with custom colors in the bottom part of the ColorPicker
grayShades(optional) defines whether the section with gray shades is displayed in the palette, true by default
icon(optional) the name of an icon from the used icon font
mode(optional) the mode of a control: "palette" (default), "picker"
palette(optional) contains arrays of colors you want to be shown in a colorpicker
paletteOnly(optional) defines whether ColorPicker is shown only the palette mode, false by default
pickerOnly(optional) defines whether ColorPicker is shown only the picker mode, false by default
placeholder(optional) a tip for the input
hiddenLabel(optional) makes the label invisible, false by default
label(optional) specifies a label for a control
labelPosition(optional) defines the position of a label: "left" | "top", "top" by default
labelWidth(optional) sets the width of the label of a control
helpMessage(optional) adds a help message to a control
preMessage(optional) a message that contains instructions for interacting with the control
successMessage(optional) a message that appears in case of successful validation of the control value
errorMessage(optional) a message that appears in case of error during validation of the control value


Related article: ColorPicker