Search, sort & filter
Help users to find and organize relevant information within a data set.
Usage
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.
Medium search field
Use a medium search field if a maximum of three different search terms are intended.
Extended search field
Use an extended search field if multiple search terms are intended.
Sorting
Sort button
There is no determination about when to prefer the simple icon sort button or the one with text.
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.
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.
Combined search, sort and filter
Style
This chapter shows several search field styles in the User Experience Toolkit.
Overview
Search & sort
Search field states and types
Result badge
The Result badge represents the name of the search item and number of found items.
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.
Sort popover
The counter in the sort button refers only to the already activated sort icons (show and hide excluded).
Sort icons
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.
Sort in lists & tables with a header
Sort in card lists & tables 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.
The hybrid version contains options for detail filtering and filter by conditions. By the detail filtering options you can sort and show & hide columns.
Typography
Search field
| State | Font-family | Font-size | Line-height | Text alignment |
|---|---|---|---|---|
| all | Siemens Sans Roman | 14px | 16x | left |
Sizing and spacing
Search field
Sort popover
