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:
1. The functional way - The search icon is placed to the right in the input field and needs to be functional and clickable. A guideline is to use a button when it leads to a search result.
2. The decorative way - 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. This can for example be used when the search field is accompanied with auto complete.
The Search component and its' states when having an interactive button has been divided into three groups:
1. Button states
2. Input field states
3. Search states
The Search component and its' states when having a decorative search icon follows these states:
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 or the placeholder. The label information and the placeholder should only be used if it adds extra value to the user, don't use it to repeat what's already said in the label.
When there is a limited number of keywords to search for, it can be a good idea to give them that information in the label information.
It is also possible, and maybe even more common, to use the placeholder. Many contexts have limited space, so using the placeholder to give the instructions might be a better solution. Remember though that the placeholder text disappears as soon as the user starts typing.
If there are many possible keywords to search for, give the user a few examples that differ from each other. It will help the user to understand the range of keywords to search for.
1 rem = 16px
States vary depending on:
Search icon is placed to the right
Search icon is placed to the left
Above: Example of search with interactive button
Above: Example of search with decorative button, accompanied by autocomplete.