Choose

The Choose option is a visual selection control that displays choices as a set of icon buttons or blocks, rather than a standard dropdown menu. It allows users to pick one option from a visually distinct list.

Why would someone use it in a custom widget? #

Use this control when you want to provide a more intuitive, visual, and faster selection experience -especially for common, recognizable options like alignment (left, center, right), layout direction (horizontal, vertical), or style presets. It makes the setting more discoverable and easier to use than a text-based dropdown.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab.
• In the Elementor Editor: Once saved, it appears as a horizontal group of icon buttons, each representing one of your defined options. Users click directly on the visual icon to make a selection.

Available Settings #

Here are the configurable settings for the Choose control based on the provided screenshots:

Basic Settings #

• Label: The name of the control shown above the icon group (e.g., “Text Alignment”, “Layout Direction”).
• Name: The unique machine-readable ID (like text_align) for the dynamic shortcode.
• Description: Optional guiding text below the control.
• Unset: A crucial toggle. When enabled, it allows users to click the selected option again to deselect it, returning the field to an empty state. This is useful for optional settings.
• Options: This is where you define the visual choices. You add rows for each option, where:
  • Key: The internal value passed to the shortcode (e.g., left, center).
  • Title/Icon: This is where you define the visual representation. The screenshot suggests you can likely set a title (text tooltip) and select an icon for each button.
• Default Value: Sets which visual option is pre-selected.

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard visibility and layout options.
• Dynamic Support: When enabled, the selected value can be populated from a dynamic source.
• Frontend Available: When enabled, the selected key (e.g., center) is passed to your widget’s frontend JavaScript.
• Separator, Conditions, Control Classes, Selector: Standard advanced options for layout and scoped styling.

Generated Shortcode #

When you add a Choose control with the Name content_align, Widget Builder generates the shortcode: {{content_align}}.

• What it represents: This shortcode outputs the internal Key of the visually selected option (e.g., left).
• Where to use it: Identical to the Select control. Use it in your HTML, CSS, or JS panels to apply logic based on the choice.
  • HTML: <div class="box align-{{content_align}}">
  • CSS: .align-{{content_align}} { text-align: {{content_align}}; }
  • JS: if ( '{{content_align}}' === 'right' ) { // do something }

How to Use It: A Practical Example #

Let’s create a “Call to Action” widget where the button’s alignment within the box can be set visually.

1. In Widget Builder’s Content tab, add a Choose control.
2. Set the Label to Button Alignment.
3. Enable the Unset toggle to allow the alignment to be cleared (optional).
4. In Options, define three choices:
   • Key: left | Title/Icon: (Select a left-align icon)
   • Key: center | Title/Icon: (Select a center-align icon)
   • Key: right | Title/Icon: (Select a right-align icon)
5. Set Default Value to center.
6. In your CSS panel, write:

.cta-button-wrapper {
    text-align: {{button_alignment}};
}

The shortcode will output left, center, or right, which are valid CSS property values for text-align.

In Elementor, users will see three icon buttons and can instantly click to change the alignment.

Common Use Cases #

• Alignment Selectors: The most classic use case for text, image, or content alignment.
• Layout Switchers: Toggle between layout presets like “List/Grid” or “Image Left/Right.”
• Visual Style Toggles: Choose between visual styles (e.g., “Filled/Outlined” button styles represented by icons).
• Icon Choice: When each option is literally a different icon (like choosing a social media platform), this control is perfect.

Helpful Tips #

• Use for Common Patterns: Reserve “Choose” for options where the visual metaphor is instantly clear (like alignment arrows). Use the standard “Select” dropdown for more abstract or text-heavy lists.
• Icon Selection is Key: Spend time picking intuitive icons for each option. The visual clarity is the main benefit of this control.
• Consider the “Unset” Feature: If the setting is optional (e.g., “Optional Divider Style”), enabling Unset gives users a clear way to choose “none.”
• Limited Space: This control displays all options horizontally. It’s best for 2-5 choices. For more, a Select dropdown is more space-efficient.

The Choose control enhances usability by making frequent, visually-representable choices faster and more engaging for the end-user.

Frequently Asked Questions #