ColorPicker

An input with an attached color picker for selecting a color.

Related sample: Form. All controls

Related sample: Form. ColorPicker

Adding ColorPicker

You can add a ColorPicker control during form initialization:

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

Properties

View the full list of ColorPicker configuration properties.

Working with ColorPicker

You can manage a ColorPicker control with the methods and events of the object that the getItem() method returns.

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 ColorPicker methods.

Events

Check the full list of ColorPicker events.

Working with the dhtmlxColorPicker widget

You can use DHTMLX ColorPicker methods with the getWidget() method of a ColorPicker control.

For example, to set focus on the specified value in the control, get the widget attached to the ColorPicker control and call its setFocus() method.

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 DHTMLX ColorPicker methods that you can apply with the getWidget() method.