Search allows users to specify a word or a phrase and find relevant pieces of content.

Search lets users explore a website or app using keywords. Search can be used as a means of discovering content, or as a filter to help the user in finding content.

When using search:

  • Combine search with autocomplete wherever possible
  • Keep the original search query on the page so the user can easily edit it if they can’t find what they’re looking for
  • Always provide a programmatically connected label even if it isn’t visible to sighted users

If the list of possible options is small, consider using select instead.

Search button

An in-field icon or a separate filled button can be used to trigger the search action.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Search icon

A search icon can be used to represent a dynamic search, so the user doesn’t need to click the search button for the search to be triggered.

  • Interactive demo - Sainsbury's

Copy guidelines

Always start your label with the word ‘search’.


Was this page helpful?

Get in touch

Our team can answer any questions about using search or give you a helping hand with your next project.
Select a theme to demo: