FiltersChips component | Adobe Commerce Developer Guide

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:

<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