The search bar helps users to find content by typing in words that describe the content they are looking for. This guide explains their usage.

  • Usage
  • Examples
  • Related components
  • Download


The search bar is a simple search function with an input field and a placeholder text for users to type in their keyword(s). An auto-suggest function helps users find what they are looking for and act as a shortcut to the content they want.

Icon colors

There are two main colors that can be used for the icons inside the search bar: black and red. Feel free to use the one that better fits your interface.

Search field on white background with black icons.

Search field on a gradient background with red icons.


Related components


If you download any document, you accept our Terms and Conditions.

Sketch UI Library
85.98 MB