How to Use Select2 Control to Create Multiselect Field?
On this page
The Select2 control is a WDesignKit Widget Builder control that lets your custom widget’s end users choose multiple options from a searchable dropdown, instead of a single value. It’s the multiselect equivalent of the plain Select control.
Requirement: This feature is part of the WDesignKit Widget Builder — make sure WDesignKit is installed and activated. See the full Widget Builder overview for the base workflow this control plugs into.
Why It Matters
A single Select control only lets a user pick one option at a time. Filter widgets, tag pickers, multi-category selectors, and any UI where someone needs to choose several items from a list all need a proper multiselect — Select2 is how you wire that into a custom Elementor widget without writing your own dropdown component.
What You Get
- A searchable, multi-value dropdown control in the Widget Builder’s Controller panel
- A Drop Down Value table where you define each option’s value and label
- A loop-based HTML pattern so every selected value renders in your widget markup
- A Multiple toggle that switches the control between single-select and multiselect behavior
Benefits
- No custom JS dropdown/multiselect library to wire up yourself
- End users get a familiar, searchable multiselect UI out of the box
- Same control definition works whether you need single or multiple selection — just flip the Multiple toggle
Capabilities
| Field | What it does |
|---|---|
| Value | The unique name inserted into the HTML editor to reference this control’s output |
| Drop Down Value → Value | The underlying value stored for a given dropdown option |
| Drop Down Value → Options | The label shown to the end user for that option |
| +Add | Adds another value/label row to the dropdown |
| Multiple toggle | ON = multiselect (Select2 behavior). OFF = reverts to a normal single-select dropdown |
Required Setup
- WDesignKit plugin installed and activated
- Elementor (the Select2 control is used inside an Elementor-targeted WDesignKit widget)
- A widget already open in the WDesignKit Widget Builder editor
How to Use It
In the Widget Builder, the Select2 control lives under Controls → Data Controls alongside the plain Select control.
- Drag the Select2 control from the Controls panel into the Layout panel.
- In the right sidebar of the HTML tab, note the control’s unique Value name.
- Because Select2 renders a list of selected values, wrap its output in a loop: click the control’s unique name, then choose Loop from the dropdown. This inserts loop HTML into the editor.
- Remove the placeholder comment inside the loop and click Value from the sidebar to insert the Select2 unique name in its place.
- Select the Select2 control itself, then in Drop Down Value add each option: a Value (stored value) and an Options label. Click +Add for each additional option.
- Keep the Multiple toggle enabled — disabling it turns the control back into a normal single-select dropdown.
- Click Save to save the widget.
Once saved, dragging the widget onto a page lets end users select multiple values from the dropdown.
Also see How to Use Control Classes to Style UI Elements.
Use Cases
- A category/tag filter widget where a visitor can select several tags at once
- A multi-city or multi-location picker for a custom listing widget
- A settings-style widget where the site owner picks multiple features to display
- Any control that needs a searchable dropdown, even with the Multiple toggle off
Limitations
- Select2’s output must be wrapped in a Loop block to render each selected value — it isn’t a single-value control like Text or Number.
- Forgetting to keep the Multiple toggle enabled silently turns it into a normal single-select, which can look like a bug if you’re expecting multi-value output.
- Dropdown options are defined manually (Value/Options pairs) — there’s no built-in dynamic source (e.g. auto-populating from taxonomy terms) for this control specifically.
Troubleshooting
No FluentSupport tickets specifically about the Select2/multiselect control were found at the time of writing.
- Dropdown only lets me pick one value — check that the Multiple toggle is enabled on the Select2 control; it defaults differently than expected if toggled off.
- Selected values don’t appear on the frontend — confirm the Select2 unique name was inserted inside a Loop block, not used as a plain single-value placeholder.
- New dropdown option doesn’t show up — make sure you clicked +Add to commit the row, and that both the Value and Options fields are filled in before saving the widget.