> ## Content Index
> Fetch the complete content index at: https://getpublii.com/dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Dropdown

- URL: https://getpublii.com/dev/dropdown/
- Published: 2019-03-23T14:08:13.348Z
- Updated: 2025-01-18T21:09:13.770Z
- Description: optgroup
- Author: Tomasz Dziuda
- Tags: Fields, Theme Settings API

If you want to allow an user to select a value from the predefined list you can use dropdown list or the [radio buttons](#INTERNAL_LINK#/post/116).

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

```json
{
    "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](https://getpublii.com/dev/media/posts/123/dropdown.svg)

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:

```json
"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.