Search Field
A search field is an input field that helps users locate objects, actions, or text.
When to use
Use a search field when specific objects are difficult to find at a glance:
There are many objects, as in the VCS Log table or in the Editor with a large file opened.
Objects aren't in a single location, for example, controls are located on different setting pages.
How to use
Label
Don't add a label Search to the search field. The magnifying glass icon is self-explanatory.
Correct  | Incorrect  |
Placeholder
Provide hints such as search scope as placeholder text.
Search and Replace fields
Mark the Search and Replace fields with placeholders when shown together to distinguish between them:
Search options
Use icon buttons inside the search field to save space and not to overload the UI.
Icon buttons should change background color when enabled so that it is clear which options are currently enabled.
Tab navigation
Make icon buttons easily accessible with Tab. Focused button should have a colored border.
Clear a search string
Show the Clear button 
when the search field has been filled. When the button is clicked, clear the search field and restore the content to its default state.
When search can be configured with options, show the clear button on the left of the option buttons. This way, option buttons won't jump when the clear button appears.
Multiline search strings
If multiline search is needed, use the New Line 
action button. It should be placed on the left of the rest of the search options.
The default shortcut for the New Line action: ⇧⌘⏎ for macOS and Ctrl + Shift + Enter for Windows/Linux.
Filters
Provide filters for complex searches. Don't use filter attributes in the search query.
Correct  | Incorrect  |
Search history
Use the magnifying glass icon with an arrow when search history is available. Show search history in a popup when clicking on the magnifying glass icon.
The keyboard shortcut for the History action is Alt + Down on all systems.
Add a search string to history:
On Enter for searches that are executed.
When the search field loses focus for searches that are executed on any keystroke.
Sizes and placement
Placement
Put the search field on top of the content that is being searched and align them vertically. For example, the search field in Settings dialog is aligned with the filtered settings tree.
Speed Search
Show the search field on demand when search is supplementary to other functionality or if space is limited. The search field should be accessible with ⌘+F on macOS and Ctrl + F on Windows/Linux. For example, space in the Project view is limited and too loaded to always show the Search bar:
Sizes
Grouped with other controls
For a search field which is displayed as an input field in a group of controls, for example, in a tool window toolbar, follow the input sizes guideline.
Above lists and trees
When placed above lists or trees, expand the field to the width of the list or tree.