Filter

Filters enable users to narrow down a selection of products or table data to only those few items that match their particular needs and preferences. The filter is a module that can consist of different components such as dropdowns, date pickers, checkboxes, radios, and other form elements.

When a filter option is selected, a chip is displayed to reflect the user’s input. Filters and chips always appear together, never as standalone elements.

Example

Instructions for a working example

This example shows how to connect a filter element (sdx-select in this case) to the sdx-filter. It is based on a two-way communication: The user’s selection is passed via the selection property to the component and needs to be updated after user interaction. For this, the sdxdeselectrequest event can be used.
The complete source code can be found in the SDX repository.

Group Filter

When some filters belong together it is possible to group them using different rows to wrap them together as shown in the example above.

Grouped filter on desktop

Grouped filter on mobile

These examples solely demonstrate the layout. In order to add functionality, the selection property needs to be set. See API for details and here for a working example.

Slot "filter-more"

Set slot="filter-more" to elements which should be hidden initially.

SDX | Swisscom Digital Experience

SDX is a set of foundation, components, and guidelines for designing and building UI at Swisscom