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.
- 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:
- 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.
For smaller or larger search groups to match our form sizing add
lg to the
search-group. Then apply the appropriate form control and button sizing classes.
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.