Skip to main content
Microsoft
Fabric-JS
Fabric-JS
  • Home
  • Get Started
    • Basic Inputs
      • Button
      • CheckBox
      • ChioceFieldGroup
      • CommandButton
      • ContextualMenu
      • Dropdown
      • Label
      • Link
      • TextField
      • Toggle
    • Content
      • FacePile
      • List
      • ListItem
      • OrgChart
      • Persona
      • Table
    • Navigation
      • Breadcrumb
      • CommandBar
      • Pivot
      • SearchBox
    • Pickers
      • DatePicker
      • PeoplePicker
    • Progress & Validation
      • MessageBar
      • MessageBanner
      • ProgressIndicator
      • Spinner
    • Surfaces
      • Callout
      • Dialog
      • Overlay
      • Panel
      • PersonaCard
      • Microsoft 365
      • Azure
      • Office 365
      • Dynamics 365
      • Power Platform
      • Windows 10
    • Products & Services
      • Windows Server
      • Enterprise Mobility + Security
      • Power BI
      • Teams
      • Visual Studio
      • Microsoft Advertising
    • Emerging Technologies
      • AI
      • Internet of Things
      • Azure Cognitive Services
      • Quantum
      • Microsoft HoloLens
      • Mixed Reality
    • Developer & IT
      • Docs
      • Developer Center
      • Windows Dev Center
      • Windows IT Pro Center
      • FastTrack
      • Power Platform
    • Partner
      • Partner Network
      • Solution Providers
      • Partner Center
      • Cloud Hosting
    • Industries
      • Education
      • Financial services
      • Government
      • Health
      • Manufacturing & resources
      • Retail
    • Other
      • Security
      • Licensing
      • AppSource
      • Azure Marketplace
      • Events
      • Research
    • View Sitemap
Sign in
Office UI Fabric JS
Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.
  • Breadcrumb
  • Button
  • Callout
  • CheckBox
  • ChoiceFieldGroup
  • CommandBar
  • CommandButton
  • ContextualMenu
  • DatePicker
  • Dialog
  • Dropdown
  • FacePile
  • Label
  • Link
  • List
  • ListItem
  • MessageBanner
  • MessageBar
  • OrgChart
  • Overlay
  • Panel
  • PeoplePicker
  • Persona
  • PersonaCard
  • Pivot
  • ProgressIndicator
  • SearchBox
  • Spinner
  • Table
  • TextField
  • Toggle

SearchBox

  • Overview
  • Using this Component
  • Variants

Overview

SearchBoxes provide an input field for searching through content, allowing users to locate specific items within the website or app.

Zero input state

When the user has clicked into the SearchBox, but has not entered any text, there is an opportunity to display "hint text" within the input field, explaining what a user can do next. This could prompt a user to search for specific type content, or explain the scope of the search. Examples include "type to search", "try searching for <x>", "search for a place" or "type to search in <x location>".

Autocomplete suggestions

As the user enters a query string, they are provided with a dropdown of autocomplete suggestions or disambiguation options. This will help them expedite the input process and formulate an effective query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for autocomplete content. In general, autocomplete suggestions have the user's input highlighted in some way (generally bolded) to indicate why it's being displayed. As the user enters more keystrokes, the suggestions update continuously/in real time. To see autocomplete suggestions, the user does not need to hit enter (execute a full search), as it is a lightweight way to get quick suggestions or results. If there are mixed result types within the autocomplete suggestions, provide visual indicators or grouping to help organize the information, making it easier to parse.

As a general guideline, results should be displayed in context with the query that was typed, with immediate access to edit the query or enter a new one. One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string.

Search scopes

Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched.

Some common search scopes include:

  • Global: Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more.
  • Web: Search a web index. Results include pages, entities, and answers.
  • My stuff: Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s).

SearchBox with no parent container

Use a SearchBox without a parent container when it is not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in.

Also available in Fabric React

Using this Component

  1. Confirm that you have references to Fabric's CSS and JavaScript on your page:

    			<link rel="stylesheet" href="fabric.min.css" />
    <link rel="stylesheet" href="fabric.components.min.css" />
    <script src="fabric.min.js"></script>
    		
  2. Copy the HTML from one of the samples below into your page. For example:

    <div class="ms-SearchBox">
      <input class="ms-SearchBox-field" type="text" value="">
      <label class="ms-SearchBox-label">
        <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
        <span class="ms-SearchBox-text">Search</span> 
      </label>
      <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Clear"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all SearchBox components on the page:

    <script type="text/javascript">
      var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
      for (var i = 0; i < SearchBoxElements.length; i++) {
        new fabric['SearchBox'](SearchBoxElements[i]);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default SearchBox
<div class="ms-SearchBox">
  <input class="ms-SearchBox-field" type="text" value="">
  <label class="ms-SearchBox-label">
    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
    <span class="ms-SearchBox-text">Search</span> 
  </label>
  <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
    <button class="ms-CommandButton-button">
      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Clear"></i></span> 
      <span class="ms-CommandButton-label"></span> 
    </button>
  </div>
</div>
<script type="text/javascript">
  var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
  for (var i = 0; i < SearchBoxElements.length; i++) {
    new fabric['SearchBox'](SearchBoxElements[i]);
  }
</script>
Collapsed SearchBox
<div class="ms-SearchBox ms-SearchBox--commandBar is-collapsed">
  <input class="ms-SearchBox-field" type="text" value="">
  <label class="ms-SearchBox-label">
    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
    <span class="ms-SearchBox-text">Search</span> 
  </label>
  <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
    <button class="ms-CommandButton-button">
      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Clear"></i></span> 
      <span class="ms-CommandButton-label"></span> 
    </button>
  </div>
  <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
    <button class="ms-CommandButton-button">
      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
      <span class="ms-CommandButton-label"></span> 
    </button>
  </div>
  <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
    <button class="ms-CommandButton-button">
      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
      <span class="ms-CommandButton-label"></span> 
    </button>
  </div>
</div>
<script type="text/javascript">
  var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
  for (var i = 0; i < SearchBoxElements.length; i++) {
    new fabric['SearchBox'](SearchBoxElements[i]);
  }
</script>
CommandBar SearchBox
<div class="ms-SearchBox ms-SearchBox--commandBar">
  <input class="ms-SearchBox-field" type="text" value="">
  <label class="ms-SearchBox-label">
    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
    <span class="ms-SearchBox-text">Search</span> 
  </label>
  <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
    <button class="ms-CommandButton-button">
      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Clear"></i></span> 
      <span class="ms-CommandButton-label"></span> 
    </button>
  </div>
  <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
    <button class="ms-CommandButton-button">
      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
      <span class="ms-CommandButton-label"></span> 
    </button>
  </div>
  <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
    <button class="ms-CommandButton-button">
      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
      <span class="ms-CommandButton-label"></span> 
    </button>
  </div>
</div>
<script type="text/javascript">
  var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
  for (var i = 0; i < SearchBoxElements.length; i++) {
    new fabric['SearchBox'](SearchBoxElements[i]);
  }
</script>
Follow us
Share this page
What's new
  • Surface Laptop 4
  • Surface Laptop Go
  • Surface Go 2
  • Surface Pro X
  • Surface Duo
  • Microsoft 365
  • Windows 10 apps
  • HoloLens 2
Microsoft Store
  • Account profile
  • Download Center
  • Microsoft Store support
  • Returns
  • Order tracking
  • Virtual workshops and training
  • Microsoft Store Promise
  • Financing
Education
  • Microsoft in education
  • Office for students
  • Office 365 for schools
  • Deals for students & parents
  • Microsoft Azure in education
Enterprise
  • Azure
  • AppSource
  • Automotive
  • Government
  • Healthcare
  • Manufacturing
  • Financial services
  • Retail
Developer
  • Microsoft Visual Studio
  • Windows Dev Center
  • Developer Center
  • Microsoft developer program
  • Channel 9
  • Office Dev Center
  • Microsoft Garage
Company
  • Careers
  • About Microsoft
  • Company news
  • Privacy at Microsoft
  • Investors
  • Diversity and inclusion
  • Accessibility
  • Security
English (United States)
  • Sitemap
  • Contact Microsoft
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Safety & eco
  • About our ads
  • © Microsoft 2021

Sign in required


Your session has expired. Please sign-in again to continue. Unfortunately any unsaved changes will be lost.

Sign in