The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
A search field enables users to enter input in order to search for specific data.
The component enables the user to search for specific data by entering input in the field.
Use the search component to help users find data. For example, in connection to pages growing in size and complexity. The search component might not be necessary where there are limited amounts of data.
Place the search component where users expect to find it. There is no correct way where to place the search component. Normally the user might expect a search field to be placed in the upper right corner, however, depending on the page and its context the placement can differ.
The component can be implemented in two different ways, functional or decorative.
A button is placed to the right in the input field. Use the functional way if the search action will lead to a specific search result. This button should be clickable and have its own states.
Specifics about the button:
The search icon is placed to the left in the input field and is not functional, just decorative. Meaning the search icon is not there to be interactive.
Use the decorative way when the search field is accompanied with auto complete.
Although the user can press enter/ search from the keyboard on both mobile and desktop, the functionality of being able to search by pressing the search button should still be included if using the field with an interactive button. Rather let the potential accompanied functionality of the search field decide whether you need the search field with a decorative icon or an interactive button.
It's preferrable to use the decorative search when auto-complete is being used.
Above: Examples of smart search, from https://material.io/design/navigation/search.html#expandable-search
The search field should have a label that explains to the user what they can search for. To give the user instructions or examples on what to search for, we can use the label information. The label information should only be used if it adds extra value to the user, don't use it to repeat what the label already says.
When there is a limited number of keywords to search for, use the label information to inform the user on what those keywords are. If they all fit in the label information, write them all out.
Many times there are multiple keywords to search for and it would not fit in the label information. Then write a few examples, as different from each other as possible to give the user ideas of what to search for.
Above: Example of search with interactive button
Above: Example of search with decorative button, accompanied by autocomplete.