ComponentsSearchBest Practices

Best Practices

Properties

Placeholder text

Avoid customizing the placeholder text. The user should intuitively know what can be searched.

If it’s necessary to customize the placeholder text, follow these recommendations:

  • Write at most 36 characters and avoid redundancy. For example, use Name and ID instead of Product name and Product ID.
  • Describe the properties that can be searched when they go beyond the merchant’s expectations. For example, ”Search for Name, ID, or Ref ID”.
  • When a Table column already has a label for the property, reuse the name for consistency.
  • Avoid adding support to search for properties that are not being shown for each result.
  • Don’t customize the width of the Search on a Collection to make the custom placeholder fit.

Position

Considering left-to-right interfaces, position the Search directly above the content that will be filtered, always in the top left of a container. Use the Collection component to correctly position the Search. Don’t position the Search in the header of a container.

Behavior

Loading

  • Show loading feedback when the search takes more than 1s. The loading state with a spinner in the Search should be the only feedback while the search is being processed.
  • Maintain the previous results visible until the new ones finish loading. Don’t show a Skeleton when processing a search.
  • Don’t block users from editing the input during the loading state.
  • Avoid a search process that takes longer than 5s.

Processing query

  • Avoid supporting search operators, since they aren’t discoverable and can be complex for most users. Prefer using Filters as a way to combine criteria.
  • Don’t include a field to search for each item property, support them in the same input.
  • Ignore typos, capitalization, and accents.
  • Support synonyms.

Returning after navigating

  • The complete search query, which includes the filters, the current page, and the search terms, should be reflected in the URL. This allows the user to easily return to the customized view and easily share it. Don’t use local storage or cookies to store the query.
  • Clear results only when the user clicks on the clear Button inside the Search field, or manually erases the search terms.

Providing feedback

When the search fails to load, or no results are found, use the EmptyState component to provide feedback. Read the EmptyState documentation for more information.

Disabling

Avoid using a disabled Search. When a list is empty, for example, prefer to hide the Search.

SearchSelect