The Choose field renders a row of icon buttons in your widget’s panel, the same control Elementor uses for text alignment: three or four buttons, one active at a time. Inside the Master Addons Widget Builder, it is the right pick whenever the options are few and an icon says more than a word. Alignment is the obvious example, but position and direction switches fit the same mold.
The Choose control’s option keys work directly with Conditions, so other fields can appear based on the picked option, and with the Twig-syntax template engine, where a check like {% if align == "center" %} switches your markup. Both guides cover the details.
Like the Select, the value handed to your template is the option’s key, not its title. What the Choose adds on top: an icon per option, an optional toggle-off behavior, and a straightforward path into Elementor’s selectors mechanism for pure CSS choices like alignment.
What the Choose field does #
- Renders a row of icon buttons in the Elementor panel, one per option you define.
- Holds one key from the defined set, exactly one button active at a time.
- Pairs each option with an eicon, such as
eicon-text-align-left, so the choice reads at a glance. - Optionally toggles off: with the Toggle option on, clicking the active button again deselects it and the value goes empty.
- Supports a responsive flag and can write CSS directly through a selector, covered below.
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 testimonial widget with a “Quote Alignment” chooser: left, center, right.
How to add a Choose field #
In the Widget Builder editor, find the Choose field in the panel on the left, grouped with the other choice fields.
Drag it into a section under the Style tab; alignment-type settings live naturally there. Once it lands, the field’s options open on the left.
Choose field options explained #
- Label: the text shown next to the buttons in Elementor, for example “Quote Alignment”.
- Name: the unique identifier for the field, letters, numbers, and underscores only, for example
quote_align. - Options: each option is a key plus a title and an icon. The title becomes the button’s tooltip and the icon is an eicon class, for example
eicon-text-align-leftfor the keyleft. - Toggle: when on, clicking the active button again deselects it and the field’s value becomes empty. Leave it off if the widget always needs a value.
- Default: the key active when the widget first drops on a page.
- Responsive: adds the device icon so alignment can differ per breakpoint.
- Description, Show Label, Separator: the standard display settings, plus Conditions for showing the field only when another control has a certain value.
Connect the Choose to your template or a selector #
There are two wiring styles. The alignment example works with either.
Template patterns. The token prints the selected key, so the Select patterns carry over unchanged. A modifier class keeps the variants in your CSS tab:
<blockquote class="quote align--{{ quote_align }}">
{{ quote_text }}
</blockquote>with .align--center { text-align: center; } and friends in the CSS tab. Conditionals work too: {% if quote_align == 'center' %}. As with the Select, compare against the key, never the title.
The Selector option. The Choose can also write CSS through Elementor’s selectors mechanism, skipping the template entirely. One thing to know before you rely on it: the default property Elementor injects for a Choose selector is color: {{VALUE}}, which is useless for alignment. A custom selectors entry has to spell out the real property:
text-align: {{VALUE}};The keys then need to be valid CSS values (left, center, right already are), and {{WRAPPER}} is prepended automatically for this kind of value control, so the styles stay scoped to your widget without you writing it.
Watch out for the silent version of this mistake. A Choose wired to a selector that keeps the default property will happily write color: center, an invalid declaration the browser drops without a word. No console warning, no visual hint. If the buttons seem to do nothing, inspect the generated CSS before touching the field config.
Use the Choose control in Elementor #
Add your custom widget to a page in Elementor, reloading the editor if the page was already open. The control appears as a row of icon buttons under your label, with the default key’s button active.
Click a button and the preview updates at once. With Toggle on, clicking the active button clears the choice, and the widget falls back to whatever your CSS tab defines. With Responsive on, the device icon lets each breakpoint hold its own pick.
Common use cases #
- Text alignment for headings, quotes, and captions, the control’s home turf.
- Element position such as image left or image right in a media-and-text card.
- Direction switches for horizontal versus vertical lists and timelines.
- Size presets like small, medium, and large mapped to modifier classes.
- Show-side choices for badges and ribbons, top-left through bottom-right corners.
Tips for working with the Choose field #
- Keep it to two, three, or four options. A row of seven icon buttons is a dropdown wearing a costume; use a Select instead.
- Match keys to CSS values when using a selector. Keys like
leftandcenterdrop straight intotext-align: {{VALUE}}with no translation layer. - Define the real property in custom selectors. The default injected property is
color: {{VALUE}}, which only suits actual color choices. - Plan for the empty value if Toggle is on. A deselected field prints an empty key, so
align--classes and conditionals should tolerate it, or keep Toggle off. - Compare against keys in conditionals. The option title is panel-only text and never matches in
{% if %}. - Use Responsive for alignment. Center-on-mobile, left-on-desktop is one control instead of two.
Frequently Asked Questions #
What is the Choose field in the Master Addons Widget Builder?
The Choose field adds Elementor’s icon-button chooser to a custom widget: a short row of buttons, each defined by a key, a title, and an eicon. The template receives the active option’s key, and the field can alternatively write a CSS property directly through a selector.
Which icons can the option buttons use?
Eicons, Elementor’s built-in icon set, referenced by class name such as eicon-text-align-left. Each option pairs its key with one eicon and a title that shows as the button tooltip.
What happens when the user clicks the active button again?
With the Toggle option on, the button deselects and the field’s value becomes empty, so conditionals like {% if quote_align %} go false and modifier classes print blank. With Toggle off, one option always stays active.
Why does my Choose selector do nothing?
Most likely the selectors entry is still using the default injected property, color: {{VALUE}}, while your keys are values like center. Define the property you actually mean, for example text-align: {{VALUE}}, and the declaration becomes valid.
Can each device have its own choice?
Yes. Enable Responsive and the control gains Elementor’s device icon, letting desktop, tablet, and mobile each hold a different key.
When should I use Choose instead of Select?
When the option set is small and visual: alignment, position, direction. If the options need words to be understood, or the list runs past four or five entries, a Select field reads better in the panel.
Wrapping up #
The Widget Builder Choose field gives small visual decisions the control they deserve. Keys sit behind icon buttons, a token feeds modifier classes and conditionals, and the selector path handles one-property choices like alignment once you define the real CSS property. For layout picks that need a full thumbnail rather than an icon, step up to the Visual Choice field. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.
