Colorpicker properties

Usage

{
    type: "colorpicker",
    name?: string,
    id?: string,
    value?: string,
    
    css?: string,
    disabled?: boolean,
    editable?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean,
    padding?: string | number,
    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,
    pickerOnly?: boolean,
    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,
}

Description

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)
editable	(optional) allows a user to enter the value of the control manually
height	(optional) the height of a control
hidden	(optional) defines whether a control is hidden
padding	(optional) sets padding between a cell and a border of the ColorPicker control
required	(optional) defines whether a control is required
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
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
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
pickerOnly	(optional) defines whether ColorPicker is shown only the picker mode
placeholder	(optional) a tip for the input
hiddenLabel	(optional) invisible label that will be used to identify the input on the server side
label	(optional) specifies a label for a control
labelPosition	(optional) defines the position of a label: "left"|"top"
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

Example

Related article: ColorPicker