Overview
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.
Formatting
Anatomy
- Field: The place where a user enters their search query.
- Field text: Inputted search text by the user. Optional placeholder text may be visible before the user types into the field.
- Search Icon Button: Signifies a search field and functions as a button. The magnifying glass icon is a universal way to indicate search.
Sizing
There are two default input height sizes, Large and Small. The width varies in size based on content, layout, and design.
Size | Height (px/rem) | Use Case |
|---|---|---|
Small | 40 / 2.5 | This is the default size and the most commonly used size. It appears in the global header. |
Large | 64 / 4 | Use when there is a lot of space to work with, such as when the user is searching content within a page view. |
Content
Main Elements
Placeholder text (Optional)
Behaviors
States
The search component has three states: enabled, hover, and focus.
Interactions
Mouse
Click on the search field input to start typing. Once a user starts typing, a close icon (‘x’) will appear and provides a way to clear the input field by clicking on the Close icon. User may submit a query by clicking the search icon button or pressing Enter.
Keyboard
Press Enter to submit text as a search term, or press Esc to clear the search field. Once a user starts typing, a Close icon (‘x’) will appear and provides a way to clear the input field by pressing the Space or Enter keys.
Type-Ahead Suggestions
Type-ahead suggestions are generated from ongoing analyses of use search patterns, and place minimal load on servers. Without committing to a search, the user can see a preview of results, suggestions of additional search terms, or zero in on what they were looking for.
Type-ahead suggestions appear as soon as the user begins typing in the search field. Use type styling to differentiate between typed query text and the suggested terms, as shown in the example below.
