Web Interface  |  Inputs


This section is about how to properly create a search input and how to display it on the page.

When the user has to do extra actions to achieve results, it reduces the effectiveness of using the site or filling out the form. If the search field is hidden and only shows up when the icon is clicked — to the user it means that there is no search on the site. If something is hidden — it's not there.

It is bad when the search field is hidden behind the icon and is only displayed when the user clicks on it.
The search field is immediately available on the page without unnecessary clicks.

02Search icon

If the search is important on the site, it is even better to add an icon to the input field, this will emphasize the form and help the user better distinguish it when quickly browsing the site.

Without the search icon, the search input is just a field.
The search field with the icon becomes more visible.

03Clear a query

If the search results are displayed immediately on the page, it is a good idea to add an icon to erase the typed query in the input. This speeds up the work with the search and gives a clear understanding of how to remove its results. Undo action with one click is always a good solution.

A search query cannot be erased in one click.
The typed query can be erased in one click.

04Search button

An icon in a button without a label can be misleading. A label with text or an icon plus text is more familiar.

A button with only an icon usually triggers a toggle action, like opening a popup or switching from one state to another. It raises doubts if there is only an icon button to the right of the search field. Maybe there are additional search parameters hidden under the icon?

Raises doubts.
It's familiar and clear.