Dropdown

If you want to allow an user to select a value from the predefined list you can use dropdown list or the radio buttons.

Dropdown field has a special parameter to define available option values and their labels:

{
    "name": "layoutFrontpage",
    "label": "Frontpage layout",
    "group": "Layout",
    "value": "cols-3",
    "type": "select",
    "options": [
        {
            "label": "1 column",
            "value": "cols-1",
            "disabled": false
        },
        {
            "label": "2 columns",
            "value": "cols-2",
            "disabled": false         
        },
        {
            "label": "3 columns",
            "value": "cols-3",
            "disabled": false
        }
    ]
}

Above code will generate a select list with three options:

You can make some options unavailable using the disabled field for each option.

It is also possible to group fields using the <optgroup> element - to achieve this, just use the group parameter for options:

"options": [
        {
            "label": "1 column",
            "value": "cols-1",
            "group": "GROUP 1"
        },
        {
            "label": "2 columns",
            "value": "cols-2",
            "group": "GROUP 2"       
        },
        {
            "label": "3 columns",
            "value": "cols-3"
        }
]

In the above case - first option will be in the GROUP 1, second option will be in the GROUP 2 and third option will remain ungrouped.

If you need to add more options to the given group - just use the same group name for these options. Options will use the same ordering as in the JSON structure.