UI MarCom 3

Search Field Stable Dark theme

The Search Field is an input that initiates a search on submission.

General guidance

The Search Field is used to type in keywords or phrases in order to find the desired content. The search label is shown as a placeholder text in a default state. It should guide the user towards which kind of keywords should be entered. The search process becomes even more effective when auto suggestion is used. There are two use cases that differ in style.

Structure

Search Field used in the content

In its style and structure, it follows the rules of a simple, label-free text input.

Search Field used in content
Search Field used in content
  1. Search icon Mandatory
  2. Input text area Mandatory
Search Field used in the header

Placed in the header it has an alternative style to meet the special requirements of header design and behavior.

Search Field used in header
Search Field used in header
  1. Search icon Mandatory
  2. Input text area Mandatory

Standard Search Field

The standard search field enables users in a very basic way to get results by simply typing in a search term.

Searchfield with applied light and dark theming
Searchfield expanded to full container width

Advanced Search Field

The advanced search field supplements the input opportunities by suggesting related search terms based on global user behavior.

Dos and don’ts

  • Do use helpful placeholder text that supports the user.
  • Do not use the header search field for content.