Color List

Color List is gh-element that contains a list of colors and allows to select one or few of them.

Functional Characteristics

This element is useful in online stores. It allows you to set the colors of the product. The buyer can then choose one or more of them for his order.

Value Format

The color list value is the ID of the option that is selected in a string type.

    "field_value": "2"

If multiple values are enabled, IDs of all selected values will be stored in the field_value, separated by commas.

Element Options

This element has options that allows to configure it or set its values.

Field Settings

Field settings of this list contain options we are already familiar with. Field Name and Name Space are standard for all gh-elements.

Settings of the color list field

Name Description
Multiple value allows to select a few colors at the same time when it is on

Multiple value

This is an option that allows you to configure how many colors the user can select. If multiple value is false, user have to choose only one color. Opposite, if it is true, user have no limit on the number of selected colors.

Options Settings

Options Settings is a table of options and their properties.

Option settings of the color list

Name Description
Name column that contains; details...
Color selected option color; details...
Edit buttons that allows to edit options;details...


This is the name that you gives to the option. In most of interpretations, it will be displayed in the field.


This is the color that you set for the option. It is displayed as a color circle and can be selected by user in application. Colors are chosen in the color picker.


Edit is a set of two buttons. The first one has an icon of the pencil and allows to edit the option data. The second has a rubbish icon and allows to delete options.

Element Style

The style of this element can be configured with the only help of standard options and interpretation. Read about that in Setting Overview article.

Element style of the color list

Data Model

The color list has data model which contains all of its options.

        "interpretation": [],
        "multiple_value": 0,
        "options": [{
            "color": "#000000",
            "name": "Black",
            "value": 1
Name Type Description
interpretation array contains all interpretation types of the color list
multiple_value boolean shows whether user select one or more colors
options array contains option objects
color string contains the color hex code
name string contains the color name
value number unique option ID


The color list elements can be filtrated out by the value name or by the presence of any value.


The color list has only many interpretation types:

Types of color list interpretation

Color list

This interpretation allows display list elements as color circles. Selection is marked with a check mark.

Color list with colors name

This type allows to display list elements as color circles with names under them. Selection is marked with a check mark.

Current value

This interpretation type allows to select color from the popup list and display its name.


That allows the list to be displayed as an entry editable field. After clicking on it, the pop-up list will be appeared.


This type displays only the ID of the selected color option.