Search box
A search box allows users to search a site for a keyword or phrase. To search, users can either enter text in the search box and press return or click the magnifying glass icon.
Search box example
How to use 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.
The placeholder text in the search bar can encourage users to search and help them use the search more effectively. There are lots of different approaches you can take when it comes to placeholder copy, and they can all achieve different things. For example:
- “Search for support, funding and events” gives users a hint of the types of things they can search for, if you think they might not know what’s on offer
- “What can we help you with?” offers a friendly, helpful tone and leaves users open to search for whatever they like
- “Search for business support in Scotland” reinforces a key aspect of the site or service, in this case for Find Business Support
There’s no one-size -fits-all solution, and the best wording will likely be unique for each site and service. If you can, try conducting an A/B test to confidently decide what's right for the site you’re working on. Contact Helen McKnight if you’re interested in setting up an A/B test.
Adding a search box in the CMS
The site header usually contains a search box by default, which will appear on every page. If you’re building a page that needs a search box within the page content, you can add this to a panel using the ‘Search box component’. When you add a search box component, you'll need to select a search results component to link it to. This means you'll need to build the search results page first.
Accessibility
We’ve given the magnifying glass button sr-only text to label the button ‘Search’, since this has no visual text to indicate what it does. We’ve also used aria code to hide the magnifying glass icon, since it doesn’t add any value to people using screen readers.
We’ve given it the role ‘search’.
Evidence and research
In testing, users found the search box and autocomplete easy to use and understand. Users found the search box easily and understood what the magnifying glass was for.
Users also liked a combination of either clicking the suggested link, clicking on the magnifying glass, or hitting enter to view a results page.
The link style was clearly recognised and the parent name of the section helped to give context.