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 icon Mandatory
- 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 icon Mandatory
- 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.
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.