This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

FiltersChips component

The FiltersChips component provides UI controls that allows users to remove the previously-applied values of the Filters and Search components.

Configuration options

Option Description Type Default Value
component The path to the component’s .js file. String Magento_Ui/js/grid/filters/chips
componentType The type of component. String filtersChips
template Path to the component’s .html template. String ui/grid/filters/chips

Source files

Extends uiCollection:

Examples

Integrate the FiltersChips component as a grid (default) with the Filters component

This is an example of how the FiltersChips component integrates with the Filters component:

1
2
3
4
5
6
7
8
9
10
11
12
13
<listing>
    <listingToolbar>
        <filters name="listing_filters">
            <settings>
                <chipsConfig>
                    <param name="component" xsi:type="string">Magento_Ui/js/grid/filters/chips</param>
                    <param name="componentType" xsi:type="string">filtersChips</param>
                    <param name="template" xsi:type="string">ui/grid/filters/chips</param>
                </chipsConfig>
            </settings>
        </filters>
    </listingToolbar>
</listing>

Result

FiltersChips Component example