Dropdown Fields

Dropdown fields give you a dropdown input.

# Settings

Dropdown fields have the following settings:

  • Dropdown Options – Define the options that will be available in the field. You even get to set the option values and labels separately, and choose which one should be selected by default.

# Templating

# Querying Elements with Dropdown Fields

When querying for elements that have a Dropdown field, you can filter the results based on the Dropdown field data using a query param named after your field’s handle.

Possible values include:

Value Fetches elements…
'foo' with a foo option selected.
'not foo' without a foo option selected.
['foo', 'bar'] with either a foo or bar option selected.
['not', 'foo', 'bar'] without either a foo or bar option selected.
{# Fetch entries with the 'foo' option selected #}
{% set entries = craft.entries()
    .all() %}

# Working with Dropdown Field Data

If you have an element with a Dropdown field in your template, you can access its data using your Dropdown field’s handle:

{% set value = entry.myFieldHandle %}

That will give you a craft\fields\data\SingleOptionFieldData object that contains the field data.

To show the selected option, output it as a string, or output the value property:

{{ entry.myFieldHandle }} or {{ entry.myFieldHandle.value }}

To see if an option is selected, use the value property:

{% if entry.myFieldHandle.value %}

To show the selected option’s label, output the label property:

{{ entry.myFieldHandle.label }}

To loop through all of the available options, iterate over the options property:

{% for option in entry.myFieldHandle.options %}
    Label:    {{ option.label }}
    Value:    {{ option }} or {{ option.value }}
    Selected: {{ option.selected ? 'Yes' : 'No' }}
{% endfor %}

# Saving Dropdown Fields in Entry Forms

If you have an entry form that needs to contain a Dropdown field, you can use this template as a starting point:

{% set field = craft.app.fields.getFieldByHandle('myFieldHandle') %}

<select name="fields[myFieldHandle]">
    {% for option in field.options %}

        {% set selected = entry is defined
            ? entry.myFieldHandle.value == option.value
            : option.default %}

        <option value="{{ option.value }}"
                {% if selected %}selected{% endif %}>
            {{ option.label }}
    {% endfor %}