Skip to main content

ColorPicker

An input with a color picker attached to it for selecting a color.

ColorPicker

Related sample: Form. All controls

Related sample: Form. ColorPicker

Adding ColorPicker​

You can easily add a ColorPicker control during initialization of a form:

const form = new dhx.Form("form_container", {
    rows: [
        {
            type: "colorpicker",
            name: "colorpicker",
            labelWidth: "200px",
            label: "Choose your color"
        }
    ]
});

Properties​

View the full list of configuration properties of the Colorpicker control.

Working with ColorPicker​

You can manipulate a ColorPicker control by using methods or events of the object returned by the getItem() method.

For example, you can get the value of the control:

const value = form.getItem("colorpicker").getValue();

Related sample: Form. Get Item

Methods​

Check the full list of methods of the ColorPicker control.

Events​

Check the full list of events of the ColorPicker control.

Working with the dhtmlxColorPicker widget​

There is a possibility to use methods of DHTMLX ColorPicker via the getWidget() method of a ColorPicker control.

For example, you can set focus on the specified value in the control. To do this, you need to get the widget attached to the ColorPicker control and then use the setFocus() method of this widget.

const colorpicker = form.getItem("colorpicker").getWidget();  // -> ColorPicker
colorpicker.setFocus("#BDF0E9"); // sets focus on the "#BDF0E9" color

Related sample: Form. Get widget of control

Check the full list of methods of the DHTMLX Colorpicker component which you can apply via the getWidget() method.