Search
<gcds-search>

Also called: search bar, site search box, search field.

Search is a space for entering keywords to find relevant information.

• GitHub
• Figma

Search anatomy

1. The input field is a space to enter search keywords.
2. The placeholder text is a prompt visible before a person types that identifies the area for the search.
3. The button initiates the search and is represented by a magnifying glass icon.

Design and accessibility for search

Place the search in a predictable location in the header

• Place the search component in the header below the language toggle and in line with the Government of Canada signature.
• Ensure the header is responsive so that the search appears below both the signature and the language toggle on mobile devices.