Search Field

Label and Placeholder

Do not add a label to the search field. The magnifying glass icon is self-explanatory.

Incorrect

Correct

Mark the replace field with a label or a placeholder when shown together with the search field to distinguish between them:

Provide hints and scope as placeholder text. For example, the placeholder for plugins' search depends on the settings page tab to make it clear that search depends on the tab:

Icons

Search Options

Use icon buttons inside the search field to save space and not to overload the UI and to be able to use them in already packed UI such as the Speed Search popup in trees or lists:

Available option icons:

	Match case
	Regex
	Words
	In selection

Change the state of options icons on hover so that it is clear that they are clickable:

Make icon buttons easily accessible with Tab navigation. Option icons should be placed on the right of the search field in the tabbing order. Show a border around the focused option.

Icon buttons should change color when enabled so that it is clear which options are currently enabled:

Clear a Search String

Show the clear button only when filtering on-screen content. When the button is clicked, clear the search field and restore the content to its default state. Do not show the clear button if the search field is empty.

Do not show the clear button when the initial data state is empty or doesn't differ from the result. For example, the close icon is not really useful in the editor search field since matches are highlighted and not filtered:

Incorrect

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. The separator between the options and the clear button makes it harder to mis-click the potentially dangerous clear icon.

Multiline Search Strings

Searching for multiline matches can be achieved with a separate New Line action button:

Put the New line action button on the left of the option buttons:

Move the New Line action button below the option buttons when the search field becomes a multi-line one:

Add a vertical separator when the scrollbar appears:

The default shortcut for the New Line action:

macOS	⇧⌘⏎
Windows/Linux	Ctrl + Shift + Enter

Completion

Provide completion for complex searches with filtering by attributes:

Do not use filter attributes as separate controls on the toolbar. Not all of them are needed every time while they take a lot of space and overload the interface. Use completion instead:

Incorrect

Correct

The following syntax is used for attributes:

• Binary attributes are marked with a number sign (#), for example, #by-jetbrains to show plugins which are developed by JetBrains.

• Values for open attributes are provided after a colon, for example, status: disabled to show all disabled plugins.

Provide aliases to the main attributes where possible, this way it would be easier for users to find the required filter. For example, the User attribute in the VCS Log search field can have the Author alias.

Show a popup with search attributes when the field gets focus, and after each space character except the space character following an attribute's name. This will make it clear that filtering by attributes is available.

Filter out the completion suggestions as the user types:

Show a popup with values right after the user has entered an attribute.

Search History

Use the magnifying glass icon with an arrow when search history is available:

And without an arrow when it's not:

Show search history in a popup when clicking on the magnifying glass icon:

Show context help in the history popup when it is empty:

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.

Placement

Put the search field on top of the on-screen content that is being searched, and align them vertically. For example, the search field in Settings dialog is aligned with the filtered settings tree:

Correct

The search field is not aligned with the content on the Keymap settings page, which makes it harder to relate the content and the search string:

Incorrect

Correct

Fit the search field to the popup windows and to a toolbar if it has top borders. This way the overall form looks less complex.

Incorrect

Correct

Incorrect	Correct

Show the search field on demand when search is supplementary to other functionality or if space is limited. For example, space in the Project view is limited and too loaded to always show the Speed Search bar:

When searching through content that is not displayed on the screen, put the search field on top of the active frame as a popup. This makes it more prominent and gives space for search results. For example, Search Everywhere is shown on top of the main IDE frame:

Sizes

For a search field shown without a toolbar (i.e. Speed Search in trees), the search width could be adjusted on typing to accommodate input:

For a search field that is not fitted to a toolbar, set the minimum width to 200:

For a search which is fitted to the toolbar, expand the field to the toolbar width.

Center-align icons and the search string with the one-line search field vertically. Adjust the right and left paddings to the higher search fields:

Save the position of the search and option icons when the search field becomes a multi-line one:

Spaces

Between the floating search field and on-screen content:

Between history and the search field:

Between search string and completion popup:

Completion popup:

Colors and Fonts

For a general search field, use the same colors as for an input field.

For a search field that is fitted to the toolbar, use a narrower focus border on macOS. The border width is 2px in that case:

Use the same font for the search string as used for showing the results.

Use the Context help font color for the attributes' names as they are secondary to their values.