Search & filter

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


When to use

Use the search and filter pattern in the following cases:

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


Depending on the different use cases, we provide the following variants:

  • Search field: Use for a simple text search.
  • Extended search field: Use when multiple search terms or advanced filtering options are possible.
  • Sorting button: Use to allow sorting by multiple columns.

Search field

Use a small search field for a simple text search. The given search term will be submitted when pressing Enter or on loose focus (when the user leaves the input field).


Simple search field

Extended search field

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


Extended search field

General construction

A search field consists of the following elements:

Search field - construction

1. Input field with search icon, 2. Clear button
  1. Input field
    • Has a search icon on the left (default) or right.
  2. Clear button
    • Empties the search field.
    • Can be placed also on the right inside the input, if no place is available (see options).


Clear search button

Clear button

1. Outside input, 2. Inside input with icon left, 3. Inside input with icon right (icon is not visible)


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


Search field states and types


1. Default, 2. Disabled, 3. Hover, 4. Focus

Filtering with result badge

The result badge shows the name of the search item and the number of found items. The removal of result badges can be performed by clicking on the clear all symbol present in each result badge, as well as the “clear all” button at the end.


Result badge interaction


Search field

StateFont-familyFont-sizeLine-heightText alignment
allSiemens Sans Roman14px16xleft
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top