Search, sort & filter

Help users to find and organize relevant information within a data set.


When to use

Use the search, sort and filter pattern in the following cases:

  • When your users should have the possibility to narrow down a list by filtering.
  • When your users should have the possibility to modify the sorting order of elements or hide columns from a list or table view.

Search field

Depending on the individual use case we provide three different search field variants:

Small search field

Use a small search field if only a single search term is possible.


Small search field
Medium search field

Use a medium search field if a maximum of three different search terms are intended.


Medium search field
Extended search field

Use an extended search field if multiple search terms are intended.


Extended search field


Sort button

There is no determination about when to prefer the simple icon sort button or the one with text.


Example of sort in list with a simple sort button


Example of sort in list with a advanced sort button


Example of card list with a advanced sort button

Sort icons

Use sort icons in the following cases:

  • In the table header
  • In sort popover menus
  • As an extra option in table header

A sort popover gives the additional possibility to show and hide columns or cards by checkboxes for specific activities. By using the drag and drop symbols, the hierarchy for each column or card can be changed, too. The sort symbols on the right side defines an ascending, descending or default sorting. If there is already an existing header, the functionality is the same. The info badge shows how many items are affected by the selected sortings.


Usage of sort items in the popover menu

Sort direction in a card list

In objects that are presented in several rows and columns such as cards, a descending sorting takes place in a z-shaped manner.


Sort direction in card lists

Combined search, sort and filter


1. Search field, 2. Sorting item (shown), 3. Sorting item (hidden), 3. Filter item (default), 5. Filter badge


Deleting a filter setting


This chapter shows several search field styles in the User Experience Toolkit.


Search & sort

Search field states and types


Search field states and types: 1. Default, 2. Disabled, 3. Hover, 4. Focus 5. Filled state


Example of search results: 1. Small, 2. Medium, 3. Extended
Result badge

The Result badge represents the name of the search item and number of found items.


Result badge

Delete options can be taken by clicking on the clear all symbol in each result badge. The search result symbol shows the found items based on the content.


Result badge interaction
Sort popover

The counter in the sort button refers only to the already activated sort icons (show and hide excluded).


Popover menu with sort options


Sort item: 1. Default, 2. Ascending, 3. Descending

Sort icons


1. Default, 2. Ascending/First click, 3. Descending/Second click, 4. Drag/Drop

Sort buttons

The sort button can be represented in two different versions - the function is the same. The only difference is in the additional text description and (downpointing) arrow. Both variations lead to a popover.


1. Default, 2. Disabled, 3. Hover/Active, 4. Enter state, 5. Width Text: Default, 6. Disabled, 7. Hover/Active, 8. Enter state

Sort in lists & tables with a header


Sort option in a simple table with a header


1. Sorted column (descending), 2. Unsorted column (default)


Sort option in a table with a header

Sort in card lists & tables without a header


Sort option in a card list without a header

Combined search, sort and filter dropdown

This chapter shows the search- sort- and filter hybrid version in the User Experience Toolkit.

Filter header

The filter header indicates if a filter has already been assigned or not. By clicking on the delete symbol inside the filter badge the specific setting can be discarded.


Filter header: 1. No setting, 2. With filter by condition setting

The hybrid version contains options for detail filtering and filter by conditions. By the detail filtering options you can sort and show & hide columns.


Detail filtering example of the hybrid version


Detail filtering & filter by condition example of the hybrid version


Representation of the standard component of the hybrid version: Time, Date, Cost, Address


Search field

StateFont-familyFont-sizeLine-heightText alignment
allSiemens Sans Roman14px16xleft

Sizing and spacing

Search field


Dimensions of the small search field


Dimensions of the medium search field


Dimensions of the extended search field

Sort popover


Sort popover dimensions


Sort items dimensions
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top