Last reviewed: 18 August 2021



Search allows a person to enter a word or a phrase to find relevant content.


Search component with primary green button.

Search component with secondary blue button.

Required elements


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


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.


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.

Go to the guidelines on buttons

Changelog for this page

Date Notes
15 July 2021 First version of page published

Get support

Ask us about anything that’s featured on the Experience Library, or any questions about design, content or development.


Co-op Experience Library

Get email updates

Find out about the latest content, changes or developments to the Experience Library.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.