Search

Search bar patterns are a combination of a text field, button, and placeholder text. In some cases, search bars may include helper text and links to an advanced search.

Best practices

  • Always accompany the search bar with a magnifying-glass icon. This icon is recognizable and helps distinguish the search field from other inputs.
  • Wherever possible, display the full open-text field as opposed to hiding it behind an icon.
  • Always include a search button. Search buttons help people recognize that there’s an additional step to trigger the search action — even if they decide to press enter.
  • When the scope of the search covers an entire product or website, include the search pattern:
    • In the upper right corner of all screens within the product or website that uses a horizontal main nav (global header).
    • In the left column just above the navigation menu of all screens within the product or website that uses a vertical main nav (vertical header).
  • For scoped searches, include the scoped search pattern in the left column just above the navigation menu (sidebar navigation) of all screens within the scope of the section. See our basic page example for a scoped search in use.
  • Include placeholder text to help users understand what they can search for.
  • For scoped searches, always include copy that communicates the scope of the search (e.g. ‘Search all City of Winnipeg events.’).

How it works

Our search bar has custom styling along with a custom button. Use the default search bar on sidebars or inner pages. Don’t forget to add the appropriate aria attributes for accessibility.

<div class="form-group search-group">
  <input type="search" class="form-control google-search" placeholder="Search 311 City Services" aria-label="Search 311 City Services">
  <button type="submit" aria-label="Search 311 City Services" class="btn btn-search"><i aria-hidden="true" class="far fa-search"></i></button>
</div>

Sizing

For smaller or larger search groups to match our form sizing add sm or lg to the search-group. Then apply the appropriate form control and button sizing classes.

<div class="form-group search-group sm">
  <input type="search" class="form-control form-control-sm google-search" placeholder="Search 311 City Services" aria-label="Search 311 City Services">
  <button type="submit" aria-label="Search 311 City Services" class="btn btn-sm btn-search"><i aria-hidden="true" class="far fa-search"></i></button>
</div>

<div class="form-group search-group lg">
  <input type="search" class="form-control form-control-lg" placeholder="Search 311 City Services" aria-label="Search 311 City Services">
  <button type="submit" aria-label="Search 311 City Services" class="btn btn-lg btn-search"><i aria-hidden="true" class="far fa-search"></i></button>
</div>

Styling

For displaying the search bar on darker backgrounds, such as the sidebar navigation on this guide, add the class .dark to the search button and to the input.

<div class="form-group search-group">
  <input type="search" class="form-control dark" placeholder="Search 311 City Services" aria-label="Search 311 City Services">
  <button type="submit" aria-label="Search 311 City Services" class="btn btn-search dark"><i aria-hidden="true" class="far fa-search"></i></button>
</div>