A search box that allows users to search a site for a keyword or phrase.
About this component
To search, users can either enter text in the search box and press return or trigger the magnifying glass icon to the right of the search box.
On a mobile device, the search component minimises to only show the magnifying glass icon. Triggering the magnifying glass icon reveals the search box.
The site search component can be reused across a site, such as in a site’s header and on search results pages.
Why we use this component
Site search is a commonly recognised component which allows users to quickly find the content they need on a site.
Searches from search boxes are tracked as standard via analytics site search settings through the use of the “q” parameter.
The form field and magnifying glass button both include a text label that is hidden from visual browsers but that will be available for screen readers.
The form has a role of ‘Search’.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: firstname.lastname@example.org