Select

The Select field puts a native dropdown in your widget’s option panel. You define a fixed set of choices, the user picks one, and your template reacts to the pick: a different layout class, a different block of markup, a different CSS value. Inside the Master Addons Widget Builder, the Select is the workhorse for anything with a handful of named variants. Layout styles, hover effects, sort orders, that kind of decision.

One detail shapes every pattern in this doc. The value your template receives is the option’s key, a short slug you choose, not the human-readable label the user sees. Keys go into class names and comparisons; labels stay in the panel.

What the Select field does #

• Renders a standard dropdown in the Elementor panel, the same native select control core widgets use.
• Holds one value from a fixed set you define as key and label pairs.
• Feeds your template the selected key, ready for modifier classes or {% if %} blocks.
• Drives Conditions on other controls, so picking “Boxed” can reveal a border-color field that “Minimal” hides.
• Supports a responsive flag, letting the user pick a different option per device.

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 pricing table widget with a “Layout Style” dropdown offering Boxed, Minimal, and Outlined variants.

How to add a Select field #

Open your widget in the Widget Builder editor and look through the fields panel on the left. Select sits with the other choice fields.

Drag it into a section under the Content or Style tab. A layout switcher like ours belongs in Style; a content-related choice, like a sort order, fits Content. Once it lands, the field’s options open on the left.

Select field options explained #

• Label: the text shown next to the dropdown in Elementor, for example “Layout Style”.
• Name: the unique identifier for the field, letters, numbers, and underscores only. Your template refers to this name, for example layout_style.
• Options: the choices themselves, each a key plus a label. The key is what your template receives; the label is what the user reads. Keep keys short and CSS-safe: boxed, minimal, outlined.
• Default: the key selected when the widget first drops on a page. Set it to your best-looking variant.
• Responsive: adds the device icon so the pick can differ per breakpoint.
• 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 Select to your template #

The Select prints its value with a plain token. That value is always the key, never the label. Two patterns cover nearly every use.

Modifier class. Print the key straight into a class attribute and let your CSS tab do the rest:

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

Picking “Boxed” renders layout--boxed, and a rule like .layout--boxed { border: 1px solid #e2e2e2; } takes over. Three variants become three short CSS blocks. The HTML never branches.

Conditional markup. When variants need different HTML, not just different styles, compare against the key:

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

Watch out for one thing here: the comparison must use the key. {% if layout_style == 'boxed' %} works, while {% if layout_style == 'Boxed Layout' %} silently never matches, and you get no warning about it. If a conditional refuses to fire, check the key spelling before you suspect anything else.

Use the Select control in Elementor #

Drop your custom widget onto a page in Elementor. If the page was already open before you saved the widget, reload the editor first, since Elementor holds onto the old control config until you do. Select the widget and the dropdown appears in its panel under the label you set, with the default option preselected.

Pick a different option and the preview updates immediately. The modifier class changes, your CSS variant kicks in, and any controls conditioned on this field appear or disappear to match.

Common use cases #

• Layout variants such as boxed, minimal, and outlined card styles from one widget.
• Hover and animation presets where each key maps to a CSS class with its own transition.
• Sort and order choices for list-style widgets, newest first or alphabetical.
• Heading tag pickers that swap an h2 for an h3 through a conditional block.
• Condition drivers that show or hide whole groups of other fields based on the selected key.

Tips for working with the Select field #

• Keys are for code, labels are for people. Use slugs like boxed as keys and save the friendly wording for the label.
• Keep keys CSS-safe. Lowercase letters, digits, and hyphens or underscores print cleanly into class names.
• Compare against the key, never the label. This is the most common reason a Select conditional never matches.
• Prefer modifier classes over conditionals when only the styling changes. The template stays one block and the variants live in CSS.
• Use the Select to drive Conditions. Along with the Switcher, it is the usual control for revealing or hiding other fields.
• Set a sensible default so the widget looks intentional the moment it is dropped.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Select field turns named variants into a one-click choice. Define keys and labels, print the key into a modifier class or an {% if %} block, and every layout decision moves into the Elementor panel. When the list grows long or one pick is not enough, step up to the Select2 field. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.