Components
Search
Search allows a person to enter a word or a phrase to find relevant content.
Example
Search component with primary green button.
Search component with secondary blue button.
Required elements
Input
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.
Go to the guidelines on the grid.
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
Label
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
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.
Button
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
Date | Notes |
---|---|
15 July 2021 | First version of page published |