PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
Multiselect component
The Multiselect component provides the interface for a list or a data set. Multiselect allows selecting multiple items.
Configuration options
| Option | Description | Type | Default |
|---|---|---|---|
component |
The path to the component’s .js file in terms of RequireJS. |
String | 'Magento_Ui/js/form/element/multiselect' |
elementTmpl |
The path to the .html template of the particular field type (multiselect). |
String | 'ui/form/element/multiselect' |
size |
The number of options that are displayed in the multiselect UI. | Number | 6 |
template |
The path to the general field .html template. |
String | 'ui/form/field' |
Source files
Extends Select
- app/code/Magento/Ui/view/base/web/js/form/element/multiselect.js
- app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<form>
...
<fieldset>
...
<field name="multiselect_example" formElement="multiselect">
<settings>
<dataType>text</dataType>
<label translate="true">Multiselect Example</label>
<dataScope>multiselect_example</dataScope>
</settings>
<formElements>
<multiselect>
<settings>
<options>
<option name="1" xsi:type="array">
<item name="value" xsi:type="string">1</item>
<item name="label" xsi:type="string">Option #1</item>
</option>
<option name="2" xsi:type="array">
<item name="value" xsi:type="string">2</item>
<item name="label" xsi:type="string">Option #2</item>
</option>
<option name="3" xsi:type="array">
<item name="value" xsi:type="string">3</item>
<item name="label" xsi:type="string">Option #3</item>
</option>
</options>
</settings>
</multiselect>
</formElements>
</field>
...
</fieldset>
...
</form>
Result
