Component > Search bar

Search bar


  1. Text entry field

Where a user enters their search/filter keywords

  1. Placeholder text

Short text indicating what this field is for, also used to display the user’s input

  1. Icon (optional)

Search icon is used to indicate search universally; X icon for removing all the input

  1. Input Chips (optional)

Selected filter chips from the menu, or converted user’s input to use in search/filter queries


  • Inactive (with or without populated)
  • Hover
  • Focused
  • Activated


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 /