Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

(m)Search Field

ProPaul edited this page Feb 23, 2018 · 3 revisions

< Pattern Library

Overview

Search field module has an input field area to search and a cta button to help users find content in your service.

Use of this pattern

  • The search module is typically used in the header fixed in place above navigation and floated to the right.
  • Avoid having multiple search boxes for the same thing on a single page. If you include a search box in the main content area, remove it from the header.
  • Mobile search on the header is condensed to the icon button and once tapped expanded to allow the user to type in the search field.

How it works

  • Make it clear from the search box placeholder copy or context what will be searched - is it the whole of the site or just one section?
  • Once a user has submitted a search they will be directed to a new page of specific search results.

Research on this pattern

Related patterns

Other

Clone this wiki locally