UI-select Component

UI-select component

The UI-select component is used to provide check box interface for a specific listing or a specific data set. The component allows selecting a collection of items.

The UI-select component has extended from the Abstract component.

Example integration:

<Magento_Cms_module_dir>/view/adminhtml/ui_component/cms_page_listing.xml

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
            <filterSelect name="uiSelect">
                <argument name="optionsProvider" xsi:type="configurableObject">
                    <argument name="class" xsi:type="string">Magento\Cms\Model\Page\Source\PageLayout</argument>
                </argument>
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
                        <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                        <item name="dataScope" xsi:type="string">uiSelect</item>
                        <item name="label" xsi:type="string" translate="true">uiSelect</item>
                    </item>
                </argument>
            </filterSelect>
</listing>

Configuration

The following configuration can be passed in arguments:

Link to any of the following templates
Link to the constructor
Label to ui-select
Default caption
Caption if selected more then one elements

The UI-select component supports keyboard navigation.

Navigation keys:

Enter key: if focus on the caption - a list of options opens, if focus on the some option - selected or unselected current option
Space key: copy ‘Enter key’ functionality
Escape key: closes the list of options
PageUp key: sets focus to previous option
PageDown key: sets focus to next option

UI-select JS component structure

Component elements

The Ui-select component is implemented in the class app\code\Magento\Ui\view\base\web\js\form\element\ui-select.js

Templates used by this component are:

app\code\Magento\Ui\view\base\web\templates\grid\filters\elements\ui-select.html
Dependencies on Other Components

Abstract
imports option

The option defines from where the component receives its data.

Code samples available in the default configuration:

    imports: {
        options: '${ $.optionsConfig.name }:options'
    }

actions option

You can modify the default actions by renaming their storefront labels

Code samples available in the default configuration:

    actions: [{
                    value: 'selectAll',
                    label: $t('Select all')
                }, {
                    value: 'deselectAll',
                    label: $t('Deselect all')
                }, {
                    value: 'selectPage',
                    label: $t('Select all on this page')
                }, {
                    value: 'deselectPage',
                    label: $t('Deselect all on this page')
                }],

Component options

Title	Description	Required For Correct Work	Type	Default Value
options.< option name >.label	Options label	-	String	undefined
options.< option name >.value	Options value	-	String	undefined
options.< option name >.optgroup	Nested level of options	-	Object	undefined
mode	Mode overrides default values for some options. In 'simple' mode showCheckbox = chipsEnabled = closeBtn = false. In 'optgroup' mode showCheckbox = openLevelsAction = false, and lastSelectable = optgroupLabels = labelsDecoration = true.	-	Boolean	false
showCheckbox	Show checkbox just before option label, select options by checking	-	Boolean	true
chipsEnabled	Selected options are shown in ui select's header as deletable chips	-	Boolean	true
closeBtn	Show button that closes dropdown	-	Boolean	true
closeBtnLabel	Label of the close button	-	string	$t('Done')
levelsVisibility	If true, all levels are visible. If is a number, this number of levels are visible.	-	Boolean/number	true
openLevelsAction		-	Boolean	true
showOpenLevelsActionIcon		-	Boolean	true
showTree		-	Boolean	false
separator		-	String	optgroup

Integration

Here is an example of configuration of select component. It is used as column filter and has 3 levels of options, with not selectable label for every level, without checkboxes:

view the configuration

Edit this page on GitHub

Give us feedback

UI-select Component