Search allows a person to enter a word or a phrase to find relevant content.
Use the search component at either:
- 60 pixels high
- 44 pixels high
Set the width of the search component using the grid. The grid is a flexible way to lay out components that adapt to different device sizes. This means the search component will adapt to fit your design.
Make sure the search component is not:
- too wide – as people using a screen magnifiers could find it hard to locate the search button
- too small – as people may find it hard to find and enter words into
You must have a label that’s visible on screen or at least described in the code. This is so it’s read out to screen reader users.
Placeholder text is the content that sits within the input field, and disappears when someone starts to enter a search term. You can use placeholder text to describe where the person is searching, for example, ‘Search Co-op’, or ‘Search recipes’.
Check that the placeholder text is not cut off on smaller screen sizes.
Search has a button with a magnifying glass icon.
The button can either be a:
- primary green button
- secondary blue button
If search is the main action someone will make on your page, make it a primary green button. The CSS class that supports the button options already exists. If you’re unsure, ask the engineers on your team to talk you through it.
Changelog for this page
|15 July 2021||First version of page published|