Search bar
Anatomy
-
Text entry field
Where a user enters their search/filter keywords
-
Placeholder text
Short text indicating what this field is for, also used to display the user’s input
-
Icon (optional)
Search icon is used to indicate search universally; X icon for removing all the input
-
Input Chips (optional)
Selected filter chips from the menu, or converted user’s input to use in search/filter queries
States
- Inactive (with or without populated)
- Hover
- Focused
- Activated
Behaviours
Clear Icon
The clear icon will show up as there is content existing in the search field. Clicking on will clear the content of the entire field.
Focus with keyboard shortcut
Many ‘expert’ users would benefit from auto-focusing the search control with a keyboard shortcut - so they know they can instantly jump to the search field on any given view with (for example) ⌘+/ or /