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.
Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.
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
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.