MultiSelect Checkbox

Basic Usage

The plugin instance can be created by passing the dropdown element to the constructor. The argument can be a DOM element ID or the DOM element itself. For example, you can use the following code:

The second argument is an optional object that can be used to pass additional settings to the plugin constructor. Alternatively, you can use the data-settings attribute on the dropdown element to pass the settings.

const dropdown = document.querySelector('.dropdown');
const instance = new WPFormsMultiSelectCheckbox(dropdown);
instance.init();

Alternatively, you can use the following code by passing the DOM element ID:

const instance = new WPFormsMultiSelectCheckbox('dropdown-id');
instance.init();

Disabled MultiSelect

To disable the entire select input, you can add the disabled attribute to the select element. This attribute prevents the user from interacting with the dropdown and selecting any options.

  Option 1
  Option 2

Disabled Options

If you want to prevent a user from interacting with a checkbox option and changing its state, you can simply add the disabled attribute to the option element. This will disable the checkbox input.

  Option 1
  Option 2

Grouped options

You can group options by using the optgroup element. Simply wrap the options you want to group in the optgroup element and provide a label attribute to it. For example, you can use the following code:

  
    Option 1
    Option 2
  
  
    Option 3
    Option 4
  

						

Clear Button

Clear button will display a button that will allow to clear current selections.

const instance = new WPFormsMultiSelectCheckbox('dropdown-id', {showClear:true});
instance.init();

Masked Input

Masked input will display a placeholder text depending on the selected options. For example, if you select multiple options, the placeholder text will be Multiple. If you select all options, the placeholder text will be All.

const instance = new WPFormsMultiSelectCheckbox('dropdown-id', {showMask:true});
instance.init();

Localized Masked Input

You have the flexibility to customize these placeholders by providing the i18n setting when initializing the plugin constructor.

You can include {count} in the multiple text to represent the number of selected options. It will be replaced with the actual count.

const instance = new WPFormsMultiSelectCheckbox(
  'dropdown-id',
  {
   showMask:true,
   i18n:{
     multiple:'{count} bebidas seleccionadas',
     all:'Todas las bebidas seleccionadas'
   }
  }
);
instance.init();

Search Enabled

Search will display a search input that will allow to filter the options.

const instance = new WPFormsMultiSelectCheckbox('dropdown-id', {showSearch:true});
instance.init();

Custom opener

You can use the customOpener setting to provide a custom opener element.

const opener = document.querySelector('.opener');
const instance = new WPFormsMultiSelectCheckbox('dropdown-id', {customOpener:opener});
instance.init();
						

Show Tags

Enabling tags will display selected options as tags.

You can also use the tagsPlacement setting to control where the tags are displayed. The default value is top. You can use the following values: top, bottom, left, right

const instance = new WPFormsMultiSelectCheckbox('dropdown-id', {showTags:true});
instance.init();

Change Handler

To observe the logged events in your browser console, toggle the checkboxes and monitor the corresponding output.

dropdown.addEventListener('wpforms_multiselect_checkbox_changed', (event) => {
  console.log('Selected options changed:', event.detail.selectedOptions);
});

Remove Handler

To view the logged events in your browser console, click on the "x" icon within the tags to remove selected options. Monitor the console output for corresponding events.

dropdown.addEventListener('wpforms_multiselect_checkbox_removed', (event) => {
  console.log('Option removed:', event.detail.removedOption);
});

Update

The update function of the plugin allows you to programmatically set the selected options in the dropdown. Simply provide the dropdown element and an array of values you want to set as selected options. For example, you can use the following code:

const valuesToSet = ['Option 1', 'Option 3'];
instance.update(dropdown, valuesToSet);

The following settings can be passed to the plugin constructor:

false

false

false

false

 'top', 'bottom', 'left', 'right'

{
 search: 'Search',
 clear: 'Clear',
 all: 'All',
 multiple: 'Multiple',
}