Picchu

Search box

Guidance

The search box is a control that is used to query for information within an app or on the web.

Sites that are part of microsoft.com will automatically inherit a search box at the upper right portion of the universal header. In cases of other Microsoft sites, or circumstances where some kind of nested search is required, refer to the guidance below which applies to both white and black backgrounds.

  • Box height: at least 36px
  • Stroke: 1px stroke inside, (rest state: 767676; hover state: 464646; active state: 0078d7)
  • Hint text inside the box: Segoe UI, 15px, 767676
  • User text query: Segoe UI, 16px, 2f2f2f
  • Search icon: Search E721, 15px; (rest: 767676; hover: 0078d7; pressed: ffffff)
  • Search icon background: 28px X 28px (rest: ffffff; hover: ffffff; pressed: 0078d7)
  • Control header (optional): Segoe UI, 15px, 2f2f2f

Auto-suggest (optional)

If your search scenario includes auto-suggest functionality, refer to the following:

  • Ensure auto-suggestions can appear both below the search box and above the search box, according to user's page scroll position.
  • Maximum height of auto-suggestion area: 374px (=max 8.5 visible suggestions, each with 44px container)
  • Include scrollbar as needed to expose additional auto-suggestions.

On white background

  • Auto-suggest text: 2f2f2f ("No results" text: 767676)
  • Auto-suggest background: rest: e3e3e3; hover: c8c8c8

On black background

  • Auto-suggest text: ffffff ("No results" text: 767676)
  • Auto-suggest background: rest: 2f2f2f; hover: 464646

Demo

See the Pen Search Box Demo by Microsoft.com (@microsoft) on CodePen.

Resources