Download

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:

Dropdown - Select list

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.

What are you waiting for?

Start building your site today.

  1. 1 Download Publii
  2. 2 Write your content
  3. 3 Publish your site
Create website