Adobe Commerce 2.3 reached end of support in September 2022.

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

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

Multiselect Component Example