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 component preview
Search anatomy
- The input field is a space to enter search keywords.
- The placeholder text is a prompt visible before a person types that identifies the area for the search.
- 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 theGovernment of Canada signature . - Ensure the header is responsive so that the search appears below both the signature and the language toggle on mobile devices.
Help us improve
Have questions or a request? Give feedback on our contact form.
Something's wrong? Raise it through GitHub with an