Search

How to use search

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.

Types of search

Search button

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

<SearchField
  name="search-field-1"
  label="Search products"
  hideLabel
  placeholder="Search products"
  hasAction
  action={
    <Button>
      <span className="ln-u-visually-hidden">Search products</span>
      <Search />
    </Button>
  }
/>

() => {
  const ClearableSearchField = withClear(SearchField)
  return (
    <ClearableSearchField
      name="search-field-2"
      hasButton
      label="Search products"
    />
  )
}

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.

<SearchField
  name="search-field-3"
  label="Search products"
  hideLabel
  placeholder="Search products"
  hasIcon
  icon={<Search />}
/>

Copy guidelines

Always start your label with the word ‘search’.

Was this page helpful?