...
The X button appears after the first character is typed, and disappears when the text is cleared (either manually or by clicking the X button).
Clicking the X button will:
delete all characters.
focus on the text field, so that new search term can be entered.
Recent / Popular Searches (optional)
 |
When an empty search field is in focus, a list of recent or popular/trending suggestions may be displayed to enable the user to conduct a quick search.
The suggestions list will include up to 8 items.
Recent items are strings that the specific user has searched for in the past. They will be presented only after the user has conducted at least one previous search, and will include the most recent searches only.
Popular items are strings that are being frequently searched by a lot of users.
Trending items are strings that are being frequently searched by a lot of users, within a recent time frame.
The number of recent and popular/trending items should be equal, unless there’s not enough data to provide an equal amount of both types. In this case the list may be divided unequally.
Recent items will be placed above popular/trending items.
Each item will be accompanied by an icon, indicating the type of suggestion (recent or popular/trending).
Use this component only if the user is expected to search for previously searched queries or popular/trending queries.
States
State | Empty | Live Search | Search with auto-suggestFilled-in |
|---|---|---|---|
Regular |  |  Coming soon… | |
Hover |  |  Coming soon… | |
Active |  |  Coming soon… | |
Disabled |  | N/A | Coming soon… |
Error | N/A | N/A | Coming soon… |
Focused |  |  | Coming soon… |
Focused, Hover |  | Coming soon… | |
Focused, Active |  | Coming soon… |
Interaction
See Live Search and Search with Auto-suggest (coming soon).
...