Search field

An input type allowing users to find content by entering keywords.

Known issues
Known issues


Storybook failed to load. Please connect to the VPN to access.


                                                            search-term="Digital Adoption"

Search field example with placeholder



This component can be used in Portal or Editor, but not in Player. It is not the same component as search in dropdown menus.

Use a search field to let users search through a large amount of content in a page or table.

Placement of the component should help identify its scope, i.e. what users can search. Place the field above searchable content whenever possible.



Display search results

  • Search results are displayed on type-ahead, pressing enter or clicking a button is not necessary.
  • They should appear below the search field, if necessary replacing other content. Always provide a clear way to dismiss search results, "clear" button is the minimum solution that should be provided.
  • If searchable items were grouped, preserve their grouping in search results (e.g. grouping guides by chapter title).
  • Show the total number of search results, if necessary, split by content type.
Search results


Sorting search results

Remember to define a sorting order:

  • Sort search results by hit accuracy whenever possible.
  • Allow users to sort by different item properties if more than just item name is displayed.
  • Alphabetical sorting should only be used as a fallback solution.


No search results

Display this pleaceholder in search results area when no results are available. Adapt the text if necessary.

search results empty


Do's and dont's

  • Make search error-tolerant, e.g., in case of typos.
  • Display search results in a way that makes it easy to identify the correct item.
  • Highlight the search term in search results.
  • Allow the use of numbers and special characters in search keywords.
  • Search should not be case-sensitive.



Content guidelines

Where the context for the search function is clear from the placement alone (e.g. in a table, in a dropdown), the placeholder text should say "Search". Modify this text if you want to indicate additional functionality, such as searching through multiple content types ("Search for guides or announcements").





Search L

Use as a standalone, key UI element, e.g. in the sidebar on Manage page.



Search M

Use in organisms such as headers, where search is one of a small group of available actions.



Search S

Use in complex organisms with limited space, such as tables.