Select2

The Select2 field is the plain Select’s bigger sibling: a dropdown you can type into, with an optional multiple mode that lets the user pick several options at once. Inside the Master Addons Widget Builder, it covers the cases a native dropdown handles badly. Long option lists that need search. Tag-style picks where one answer is not enough.

The single-select mode behaves exactly like the Select field: your template receives one key. Flip on Multiple and the value becomes an array of keys, which changes how your template has to read it. That switch is the heart of this doc.

What the Select2 field does #

• Renders a searchable dropdown in the Elementor panel; the user types to filter the option list.
• Holds one key from your defined options in single mode, the same contract as the plain Select.
• Holds an array of keys when the Multiple option is on, shown as removable tags in the control.
• Feeds templates through a token or a loop, depending on that mode.
• Uses key and label pairs you define, so templates always work with stable slugs.

If you are new to building widgets, start with the Widget Builder overview first.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
• A custom widget open in the Widget Builder editor. Our example is a portfolio card widget where editors tag each instance with one or more categories: Branding, Web, Print, Motion.

How to add a Select2 field #

Find Select2 in the fields panel on the left of the Widget Builder editor. It sits with the other choice fields.

Drag it into a section under the Content tab. Once it lands, the field’s options open on the left, and the first decision is whether this control picks one value or many. Settle that before you touch the template, because the two modes want different markup.

Select2 field options explained #

• Label: the text shown next to the control in Elementor, for example “Categories”.
• Name: the unique identifier for the field, letters, numbers, and underscores only, for example selected_tags.
• Options: the choices as key and label pairs. Keys are the slugs your template sees (branding, web); labels are the words in the dropdown.
• Multiple: the mode switch. Off, the user picks one option. On, the control accepts several picks and the value becomes an array of keys.
• Default: the key, or keys, selected when the widget first drops on a page.
• Description, Show Label, Separator: the standard display settings, plus Conditions further down for showing the field only when another control has a certain value.

Connect the Select2 to your template #

In single mode, treat it exactly like a Select. The token prints the chosen key, so modifier classes and comparisons work as usual:

<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}

In multiple mode, the value is an array of keys, and a plain {{ selected_tags }} prints nothing useful. The template has to loop:

<div class="card-tags">
  {% for tag in selected_tags %}
  <span class="tag tag--{{ tag }}">{{ tag }}</span>
  {% endfor %}
</div>

• selected_tags is the field’s Name.
• tag is a loop variable you invent; call it anything.
• The block between {% for %} and {% endfor %} prints once per picked key, in the order they were picked.

Watch out for the mode mismatch. A template written with a bare token keeps “working” after you enable Multiple; it just renders an empty spot, no error, nothing in the console. If a Select2 value seems to vanish, check whether Multiple is on and the template still expects a single key. That mismatch is the cause more often than not.

Use the Select2 control in Elementor #

Add your custom widget to a page in Elementor, reloading the editor if the page was already open. The control renders as a dropdown with a search box. Start typing and the list filters as you go.

With Multiple on, each pick becomes a small tag inside the control, removable with its x. Every add or remove re-renders the loop, so the badges on the card track the control in real time.

Common use cases #

• Category and tag pickers that render badge rows on cards and portfolio items.
• Long option lists such as country, industry, or font-pairing choices where search beats scrolling.
• Feature checklists where each picked key prints one line in a pricing column.
• Filter-bar widgets whose picked keys become data attributes for a JS filter script.
• Social profile selectors where each key maps to an icon and link in the loop.

Tips for working with the Select2 field #

• Decide the mode before writing the template. Single mode wants a token, multiple mode wants a loop; they are not interchangeable.
• Never print a multiple value directly. {{ selected_tags }} on an array yields nothing useful; only the {% for %} loop reaches the keys.
• Keys stay slugs, labels stay words. The loop prints keys, so if the badge text should be human-friendly, either make the keys presentable or map them with {% if %} blocks inside the loop.
• An empty multi-select loops zero times. The wrapper div still renders, so wrap it in {% if selected_tags %} when an empty pick should leave no markup behind.
• Use the plain Select for short lists. Three or four fixed variants do not need search; Select2 earns its place at longer lists and multi-picks.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Select2 field covers the two jobs a native dropdown cannot: searching long lists and picking several values at once. Keep the single-mode contract in your head, one key through a token, and switch to a {% for %} loop the moment Multiple goes on. For icon-button choices rather than dropdowns, see the Choose field. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.