You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

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