Search input

A search input allows users to look for information from a wide set of possible results.

Search input
When to use

Use a search input:

  • when you want give users the possibility of finding information that is not immediately visible
  • when there could be multiple results from different sources

Don't use a search input:

  • when there are limited options a user can pick from (use a dropdown instead)
  • if you want users to filter results from a predefined set of options

Best practice
  • If you have limited vertical space, use the placeholder instead of the label (but try and use the label wherever possible as it is clearer and more accessible).
  • Use the size of the input to suggest how many characters a user should enter — so if you only need a few characters, don’t make it too wide.
  • Only use the information message if you have evidence that users need more context.



Label copy should:

  • be no more than 3 words

  • be a noun that describes the information the user needs to enter (and not a verb)

Information message (optional)

Information message copy should:

  • be a single sentence

  • give some extra context to help the user enter the right information


Placeholder copy should:

  • be relevant and short

  • tell the user what to enter (for example, 'Search')




Developer documentation