Select2 Control

Elementor select2 control displays a select box control based on Select2 library. It accepts an array in which the key is the value and the value is the option name. Set multiple to true to allow multiple value selection.

The control is defined in Control_Select2 class which extends Base_Data_Control class.

Note that when using the control, the type should be set using the \Elementor\Controls_Manager::SELECT2 constant.

Arguments

Name Type Default Description
type string select2 The type of the control.
label string The label that appears above of the field.
description string The description that appears below the field.
show_label bool true Whether to display the label.
label_block bool false Whether to display the label in a separate line.
separator string default Set the position of the control separator. Available values are default, before, after and none. default will position the separator depending on the control type. before / after will position the separator before/after the control. none will hide the separator.
options array An array of key => value pairs: [ 'key' => 'value', ... ]
multiple bool false Whether to allow multiple value selection.
default string|array The selected option key, or an array of selected values if multiple is set to true.

Return Value

(string|array) The selected option key, or an array of selected keys if multiple is set to true.

Usage

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Content', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'show_elements',
			[
				'label' => __( 'Show Elements', 'plugin-domain' ),
				'type' => \Elementor\Controls_Manager::SELECT2,
				'multiple' => true,
				'options' => [
					'title'  => __( 'Title', 'plugin-domain' ),
					'description' => __( 'Description', 'plugin-domain' ),
					'button' => __( 'Button', 'plugin-domain' ),
				],
				'default' => [ 'title', 'description' ],
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		foreach ( $settings['show_elements'] as $element ) {
			echo '<div>' . $element . '</div>';
		}

	}

	protected function _content_template() {
		?>
		<# _.each( settings.show_elements, function( element ) { #>
			<div>{{{ element }}}</div>
		<# } #>
		<?php
	}


}