---
title: Select2
description: "The Select2 field adds a searchable dropdown to a custom widget built with the Master Addons [Widget Builder](https://master-addons.com/widget-builder/). Editors type to filter the list, and with Show Multiple turned on they can pick several options at once. Use it for…"
url: "https://master-addons.com/docs/widget-builder/select2/"
updated: "2026-09-17"
category: Widget Builder
---

# Select2

The Select2 field adds a searchable dropdown to a custom widget built with the Master Addons [Widget Builder](https://master-addons.com/widget-builder/). Editors type to filter the list, and with Show Multiple turned on they can pick several options at once. Use it for long option lists or for tag-style choices where one answer isn't enough.

Select2 is a Pro field. The free plugin includes a limited Widget Builder, and the full set of fields comes with [Master Addons Pro](https://master-addons.com/pricing/).

![Two portfolio cards built with the Widget Builder Select2 field showing different project types and tags](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081224/widget-builder-01-select2-portfolio-card-result.webp)

## What the Select2 field does

- It adds a dropdown with a search box to your widget's panel in Elementor.
- With Show Multiple off, the editor picks one option and your template gets that option's key.
- With Show Multiple on, the editor picks any number of options, shown as removable tags, and your template gets a list of keys that you print with a `{% for %}` loop.
- Each option has a key and a label. Editors see the labels, and your HTML always receives the keys.

If you haven't built a widget yet, read the [Widget Builder overview](https://master-addons.com/docs/widget-builder/widget-builder-settings/) first. For a short single-choice list without search, the plain [Select field](https://master-addons.com/docs/widget-builder/select/) is simpler.

## Before you start

- WordPress with Elementor installed and active.
- Master Addons for Elementor and Master Addons Pro, both active. The [installation guide](https://master-addons.com/docs/getting-started/installing-plugin/) covers setup.
- A widget open in the Widget Builder. The example in this guide is a "Portfolio Card" widget with a Text field for the project title and two Select2 fields: Project Type (one choice) and Project Tags (several choices).

## How to add a Select2 field

1. Go to **Master Addons > Widget Builder** and open your widget.
2. On the **Content** tab, add a section if there isn't one yet.
3. Type `select` in the field search box on the left. Select and Select2 come up.
4. Drag **Select2** into the section. Its settings open in the left sidebar.

![Select2 field found by searching select in the Master Addons Widget Builder with Project Type and Project Tags fields in a Content section](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081227/widget-builder-02-select2-field-widget-builder.webp)

A new Select2 field starts with Show Multiple turned on and three sample options (`value-1` to `value-3`). Replace them with your own before you write the template.

## Select2 field options explained

Here is the Project Type field, set up for a single choice:

![Select2 field options in single mode with Show Multiple off, four options and Branding as the default value](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081230/widget-builder-03-select2-single-mode-options.webp)

- **Label** is the text next to the control in Elementor, for example "Project Type".
- **Name** is the field's unique ID (letters, numbers and underscores only). It is also the token you use in the template, so `project_type` becomes `{{project_type}}`.
- **Description** appears under the control in Elementor. Use it for a short hint such as "Choose one category."
- **Show Multiple?** switches between one pick (No) and many picks (Yes). This changes what your template receives, so decide before you write the HTML.
- **Options** is the list of choices. The left box is the key your template gets (`branding`, `web`). The right box is the label editors see (Branding, Web Design). Use the plus icon to add a row and the red cross to remove one.
- **Default Value** is what's selected when the widget is first added to a page. In single mode it's a normal dropdown. If you leave it empty, the first option is selected.

Project Tags uses the same options with Show Multiple turned on. The Default Value box becomes a tag picker, so you can preselect more than one option. Leave it empty and the first option is preselected.

![Select2 field options with Show Multiple on, six key and label options and Logo and Packaging as default values](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081233/widget-builder-04-select2-multiple-mode-options.webp)

If the Default Value list still shows the old sample options after you edit Options, click **Save Settings** and open the field again.

Below Default Value you'll find the common settings shared by most fields: Show Label, Label Block, Responsive Control, Dynamic Support, Frontend Available, Separator, [Conditions](https://master-addons.com/docs/widget-builder/conditions/) and Control Classes. Label Block is worth turning on for a multiple field, since the control then gets the full panel width for its tags.

## Use Select2 values in your template

How you print the value depends on Show Multiple.

### Single mode: print the key

A single Select2 works like any other token. `{{project_type}}` prints the selected key, so you can use it as text or build a CSS class from it:

```
<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>
```

With Branding selected, that renders `type-branding` and `branding`. You can also compare it: `{% if project_type == 'web' %}...{% endif %}`.

### Multiple mode: loop over the keys

A multiple Select2 holds a list, and `{{project_tags}}` on its own prints nothing. Loop over it instead:

```
<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>
```

The loop runs once for each picked option, in the order the editor picked them. Inside it, `{{ tag }}` is one key, and filters such as `{{ tag|upper }}` work too. The [Twig syntax guide](https://master-addons.com/docs/widget-builder/twig-syntax/) lists everything the template engine supports.

![Widget HTML using the project_type token and a for loop over project_tags](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081237/widget-builder-05-select2-template-for-loop.webp)

The Documentation panel next to the code editor lists a token for every field. Copying `{{project_tags}}` from there is fine for single fields, but a multiple field still needs the loop.

Click **Save Settings** when the template is done.

## Use the Select2 control in Elementor

Add the widget to a page, or reload the editor if the page was already open. Both Select2 controls appear on the Content tab with their defaults already selected.

![Project Type and Project Tags Select2 controls in the Elementor Content tab next to the rendered portfolio card](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081240/widget-builder-06-select2-controls-elementor-panel.webp)

In the multiple control, click the plus button or the empty space after the tags and start typing. The list narrows as you type, and Enter adds the highlighted option. Each tag has a small cross that removes it.

![Typing in a multiple Select2 control in Elementor filters the options to Social Media](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081244/widget-builder-07-select2-search-filter.webp)

The single control opens a dropdown with its own search box. Pick an option, or use the cross next to the current value to clear it.

![Single Select2 dropdown open in Elementor with a search box and four options](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081247/widget-builder-08-select2-single-dropdown.webp)

The canvas updates straight away. Notice that the panel shows labels (Web Design, Social Media) while the card prints keys (`web`, `social`):

![Elementor panel shows Select2 labels Web Design and Social Media while the widget prints the keys web and social](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17081251/widget-builder-09-select2-labels-vs-keys.webp)

If you need the label text on the page, either make the key readable enough to display, or map it in the template:

```
{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}
```

## Common use cases

- Tags or services on portfolio, case study and team cards.
- A category or style picker that adds a CSS class, such as `type-web`.
- Long lists like countries, industries or icon sets, where search saves scrolling.
- Feature lists on pricing or product cards, looped into list items.

## Tips for working with the Select2 field

- Decide on Show Multiple first. Switching it later means changing `{{field}}` to a loop, or the other way round.
- Write keys in lowercase with no spaces (`social`, `web`). They end up in class names and comparisons.
- Don't rename keys after the widget is in use. Pages that already saved the old key won't match the new one.
- Style the output with the key, for example `.type-web .card-type { ... }`.
- For a handful of icon buttons instead of a dropdown, use the [Choose field](https://master-addons.com/docs/widget-builder/choose/).

## Frequently Asked Questions

   Is the Select2 field free?

No. Select2 is one of the Pro fields in the Widget Builder, so Master Addons Pro has to be active before you can add it to a widget.

 How do I show every value picked in a multiple Select2?

Loop over the field: `{% for tag in project_tags %}{{ tag }}{% endfor %}`, where `project_tags` is the field's Name. The loop runs once per picked option.

 Why does my Select2 token print nothing?

Show Multiple is probably on. A multiple field holds a list, and `{{field_name}}` can't print a list. Use a `{% for %}` loop, or turn Show Multiple off if one choice is enough.

 Does the template get the option label or the key?

The key. If the option `web` has the label Web Design, the template gets `web`. To print the label, use a readable key or map it with `{% if %}`.

 What's the difference between Select and Select2?

Both use key and label options. Select2 adds a search box and can hold several picks at once with Show Multiple. Use Select for short single-choice lists.

## Wrapping up

Add the Select2 field, set your keys and labels, and choose between one pick and many before you write the HTML. Print a single value with `{{field_name}}` and loop over a multiple one with `{% for %}`. For repeating groups of fields rather than a list of choices, look at the [Repeater field](https://master-addons.com/docs/widget-builder/repeater/), and check [pricing](https://master-addons.com/pricing/) for what each plan includes.