Colorpicker properties

Usage

{
    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,
    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,
}

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), 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
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 CSS class 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

Example

Related article: ColorPicker