Fabric JS

Overview

Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use.

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-Toggle">
      <span class="ms-Toggle-description">Let apps use my location</span> 
      <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
      <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0">
        <span class="ms-Label ms-Label--off">Off</span> 
        <span class="ms-Label ms-Label--on">On</span> 
      </label>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Toggle components on the page:

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

Variants

Default Toggle
<div class="ms-Toggle">
  <span class="ms-Toggle-description">Let apps use my location</span> 
  <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
  <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0">
    <span class="ms-Label ms-Label--off">Off</span> 
    <span class="ms-Label ms-Label--on">On</span> 
  </label>
</div>
<script type="text/javascript">
  var ToggleElements = document.querySelectorAll(".ms-Toggle");
  for (var i = 0; i < ToggleElements.length; i++) {
    new fabric['Toggle'](ToggleElements[i]);
  }
</script>
Let apps use my location
Disabled Toggle
<div class="ms-Toggle is-disabled">
  <span class="ms-Toggle-description">Let apps use my location</span> 
  <input type="checkbox" id="demo-toggle-2" class="ms-Toggle-input" />
  <label for="demo-toggle-2" class="ms-Toggle-field">
    <span class="ms-Label ms-Label--off">Off</span> 
    <span class="ms-Label ms-Label--on">On</span> 
  </label>
</div>
<script type="text/javascript">
  var ToggleElements = document.querySelectorAll(".ms-Toggle");
  for (var i = 0; i < ToggleElements.length; i++) {
    new fabric['Toggle'](ToggleElements[i]);
  }
</script>
Let apps use my location
Text Left Toggle
<div class="ms-Toggle ms-Toggle--textLeft">
  <span class="ms-Toggle-description">Let apps use my location</span> 
  <input type="checkbox" id="demo-toggle-1" class="ms-Toggle-input" />
  <label for="demo-toggle-1" class="ms-Toggle-field" tabindex="0">
    <span class="ms-Label ms-Label--off">Off</span> 
    <span class="ms-Label ms-Label--on">On</span> 
  </label>
</div>
<script type="text/javascript">
  var ToggleElements = document.querySelectorAll(".ms-Toggle");
  for (var i = 0; i < ToggleElements.length; i++) {
    new fabric['Toggle'](ToggleElements[i]);
  }
</script>
Let apps use my location