Select2

The Select2 control adds a searchable dropdown to your custom widget. Think of it as the upgraded version of the plain Select control: the editor can type to filter options, and with one toggle you let them pick more than one value at a time. Each selected value shows up as a removable tag inside the field.

You build the option list yourself in the Widget Builder, each option being a value (what your code receives) and a label (what the editor sees). The control stores whatever the editor picks, so you can pull that value into your widget’s HTML, CSS, or JS.

Screenshot: the Select2 control settings panel showing Label, Name, Description, Show Multiple toggle, and the Options value and label list. Upload select2-control-settings.png here.

When to reach for Select2 over Select #

Both controls give the editor a dropdown. The difference is scale and input style:

• Use Select for a short list where one choice is enough, like an alignment or a layout style.
• Use Select2 when the list is long enough to need a search box, or when the editor should be able to choose several values at once (categories, tags, a set of icons to show).

What the Select2 control adds to your widget #

Once it is in place, the editor sees a dropdown field with your options. Click it and a search box appears so they can filter as they type. If you turned on multiple selection, each pick becomes a tag with a small x to remove it, and they can keep adding more.

Screenshot: a Select2 multi-select dropdown inside an Elementor widget showing Option 1 and Option 2 as removable tags with a search dropdown open. Upload select2-control-frontend.png here.

Why would someone use it in a custom widget? #

A lot of widgets need the editor to pick from a defined set: which post types to query, which social networks to show, which columns to display. Select2 makes that pick fast even when the list is long, and the multiple option lets one field stand in for what would otherwise be a row of switches.

• Search instead of scroll when the option list runs long.
• Collect several values in one field with multiple selection turned on.
• Keep client widgets simple in white-labeled builds, since one searchable field beats a wall of checkboxes.

Where This Option Appears #

• Inside the Widget Builder, on the Content tab, when you add a new control to your custom widget.
• The dropdown it generates shows up in the widget’s settings for whoever edits the widget.
• The selected value (or values) is available to your widget output through the control’s shortcode.

Available Settings #

Here is every field in the Select2 control panel, in the order it appears.

Label #

The text that appears above the field in the panel, something like “Choose Categories.” The helper note reads: The label that appears above of the field.

Name #

The unique identifier for the control. It can only contain letters, numbers, and underscores (_). This is also the handle you use in the shortcode, for example select2.

Description #

Optional helper text that shows below the field. Use it to tell the editor what the selection controls, like “Pick the post categories to display.”

Show Multiple? #

Toggle this on to let the editor select more than one option. With it on, each choice becomes a removable tag and the stored value is a list. With it off, Select2 behaves as a single-choice searchable dropdown.

Options #

This is where you define the dropdown choices. Each row has two fields: the value on the left (what your code receives, like value-1) and the label on the right (what the editor sees, like Option 1). Click the plus icon to add a row, the red x to remove one. Keep the values lowercase and slug-friendly so they are easy to match in your code.

Default Value #

The option or options selected before the editor changes anything. With multiple selection on, you can set several defaults, each shown as a tag. Any default has to match a value you actually defined in the Options list, or it just shows blank.

Common Settings #

• Show Label: toggles whether the label text is displayed.
• Label Block: when on, the label sits on its own full-width line instead of inline.
• Responsive Control: enable a different value per device (desktop, tablet, mobile).
• Dynamic Support: enable dynamic content support so the value can come from a dynamic source.
• Frontend Available: make the selected value available to front-end JavaScript. Turn this on if your widget’s JS needs to read the selection.
• Separator: set the position of the separator line, either None, Before, After, or Default.
• Conditions: show this control only when another control matches a value. The condition row takes a Control Name, an Equality (Equal, Not Equal), and a Control Value.
• Control Classes: add custom CSS classes to the control wrapper in the panel.

Selector #

A CSS selector where the control styles are applied. The default is {{WRAPPER}} .control-class, where {{WRAPPER}} is replaced with the widget wrapper. Most of the time Select2 is used to drive output rather than styling, so you can leave this at its default.

Generated Shortcode #

Select2 stores the editor’s choice, so you reference it by the control name. If the Name is select2, you pull the value into your widget with {{select2}} in the HTML, CSS, or JS panels. With multiple selection on, the value comes through as a list, so loop over it in your markup rather than printing it as a single string.

How to Use It: A Practical Example #

Say you are building a “Social Links” widget and you want the editor to choose which networks to show:

1. Open your widget in the Widget Builder and go to the Content tab.
2. Add a Select2 control. Set its Label to Networks and its Name to networks.
3. Turn on Show Multiple? so the editor can pick several networks.
4. In Options, add rows like facebook / Facebook, x / X, instagram / Instagram.
5. Set a Default Value if you want a couple of networks shown out of the box.
6. In your HTML, loop over {{networks}} to print an icon and link for each chosen network.

The editor now searches and picks networks from one field instead of toggling a long list of switches.

Common Use Cases #

• Choosing post types, categories, or tags to query in a dynamic widget.
• Picking which social networks or contact methods to display.
• Selecting a set of icons or features to show from a larger library.
• Filtering long option lists where a plain dropdown would be slow to scroll.
• Letting editors build a multi-value list (like a row of badges) from one field.
• Any single choice from a long list where search makes the pick faster than the basic Select control.

Helpful Tips #

• Keep your option values lowercase and slug-friendly (value-1, not Value 1). It saves headaches when you match them in code.
• Every Default Value has to match a value in your Options list, or it will not show as selected. This is the most common reason a default looks blank, and it is easy to miss when you rename a value later.
• With multiple selection on, remember the value is a list. Loop over it in your markup instead of treating it like a single value.
• Pair Select2 with the Repeater control when each chosen item needs its own extra fields.
• Group related controls under a Heading control so the panel stays readable.

The Select2 control is the searchable, multi-select option in the Widget Builder. Define your value and label pairs, decide whether one choice or many makes sense, and the editor gets a fast dropdown that feeds straight into your widget output.

Frequently Asked Questions #