Dropdown - Office UI Fabric JS

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.

Overview

A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

Using this Component

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>
		
	

Copy the HTML from one of the samples below into your page. For example:

<div class="ms-Dropdown" tabindex="0">
  <label class="ms-Label">Dropdown label</label>
  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
  <select class="ms-Dropdown-select">
    <option>Choose a sound&amp;hellip;</option>
    <option>Dog barking</option>
    <option>Wind blowing</option>
    <option>Duck quacking</option>
    <option>Cow mooing</option>
  </select>
</div>

Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Dropdown components on the page:

<script type="text/javascript">
  var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
  for (var i = 0; i < DropdownHTMLElements.length; ++i) {
    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
  }
</script>

Replace the sample HTML content with your content.

Variants

Default Dropdown

<div class="ms-Dropdown" tabindex="0">
  <label class="ms-Label">Dropdown label</label>
  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
  <select class="ms-Dropdown-select">
    <option>Choose a sound&amp;hellip;</option>
    <option>Dog barking</option>
    <option>Wind blowing</option>
    <option>Duck quacking</option>
    <option>Cow mooing</option>
  </select>
</div>

<script type="text/javascript">
  var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
  for (var i = 0; i < DropdownHTMLElements.length; ++i) {
    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
  }
</script>

Disabled Dropdown

<div class="ms-Dropdown is-disabled" tabindex="0">
  <label class="ms-Label">Dropdown label</label>
  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
  <select class="ms-Dropdown-select">
    <option>Choose a sound&amp;hellip;</option>
    <option>Dog barking</option>
    <option>Wind blowing</option>
    <option>Duck quacking</option>
    <option>Cow mooing</option>
  </select>
</div>

<script type="text/javascript">
  var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
  for (var i = 0; i < DropdownHTMLElements.length; ++i) {
    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
  }
</script>

States

State	Applied to	Result
.is-disabled	.ms-Dropdown	Disables the dropdown.