Search Field
The Search Field enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.
Table of Contents
Edit this section, Opens in new windowOverview
Search offers users a way to explore a website or application using keywords. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.
Variations
| Type | Purpose |
|---|---|
| Default | The default search field. |
| Search in global header | The search field component adjuste to fit into the Global Header component. |
Usage
Principles
The Search Field follows the same basic design principles as the Input Fields.
Placement
On a landing or home page, it is recommended that the search box be placed in the top right area of the screen. This is where users expect to find the search.
On a search results page, the natural position of the searchbox is closer to the search results. This helps indicate a relationship between the results and the search query.
Behaviours
Interactions
When searching
When the user is typing in a search query, a button appears to the right, enabling the user to reset the search query.
If autocomplete is used, the user will get matches appearing as suggestions. See Autocomplete documentation.
Focus
2px border with color BL 1, BLUE.
Modifiers
Large
You can also use a larger version of the search field.
Global header
Please see the Global Header documentation for implementation and other documentation.