...
Step | Visual Example | Description |
---|---|---|
Initial state | Hint text in grey | |
Hover over the search field | Boarder colour changes | |
Click on the text field |
| |
Enter first letter | Hint text hidden |
|
Enter next letter/s | The list is filtered to show relevant results | |
Click on item in the list | Focus is moved away from the search field | |
Clear all | Click on the “x”: (1) clears all characters (2) focus on the text field. The "x" disappears when the text is cleared (both manually or using the "x" button) |
...