Search

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.

Go to the guidelines on buttons