Fabric JS

Overview

A form input that allows for the choice of one or more people.

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-PeoplePicker">
      <div class="ms-PeoplePicker-searchBox">
        <div class="ms-TextField ms-TextField--textFieldUnderlined">
          <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option">
        </div>
      </div>
      <div class="ms-PeoplePicker-results">
        <div class="ms-PeoplePicker-resultGroup">
          <div class="ms-PeoplePicker-resultGroupTitle">
            Contacts
          </div>
          <div class="ms-PeoplePicker-result" tabindex="1">
            <div class="ms-Persona ms-Persona--sm">
              <div class="ms-Persona-imageArea">
                <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
              </div>
              <div class="ms-Persona-presence">
              </div>
              <div class="ms-Persona-details">
                <div class="ms-Persona-primaryText">Russel Miller</div>
                <div class="ms-Persona-secondaryText">Sales</div>
              </div>
            </div>
            <button class="ms-PeoplePicker-resultAction">
              <i class="ms-Icon ms-Icon--Clear"></i>
            </button>
          </div>
          <div class="ms-PeoplePicker-result" tabindex="1">
            <div class="ms-Persona ms-Persona--sm">
              <div class="ms-Persona-imageArea">
                <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
              </div>
              <div class="ms-Persona-presence">
              </div>
              <div class="ms-Persona-details">
                <div class="ms-Persona-primaryText">Douglas Fielder</div>
                <div class="ms-Persona-secondaryText">Public Relations</div>
              </div>
            </div>
            <button class="ms-PeoplePicker-resultAction">
              <i class="ms-Icon ms-Icon--Clear"></i>
            </button>
          </div>
          <div class="ms-PeoplePicker-result" tabindex="1">
            <div class="ms-Persona ms-Persona--sm">
              <div class="ms-Persona-imageArea">
                <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
              </div>
              <div class="ms-Persona-presence">
              </div>
              <div class="ms-Persona-details">
                <div class="ms-Persona-primaryText">Grant Steel</div>
                <div class="ms-Persona-secondaryText">Sales</div>
              </div>
            </div>
            <button class="ms-PeoplePicker-resultAction">
              <i class="ms-Icon ms-Icon--Clear"></i>
            </button>
          </div>
          <div class="ms-PeoplePicker-result" tabindex="1">
            <div class="ms-Persona ms-Persona--sm">
              <div class="ms-Persona-imageArea">
                <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
              </div>
              <div class="ms-Persona-presence">
              </div>
              <div class="ms-Persona-details">
                <div class="ms-Persona-primaryText">Harvey Wallin</div>
                <div class="ms-Persona-secondaryText">Public Relations</div>
              </div>
            </div>
            <button class="ms-PeoplePicker-resultAction">
              <i class="ms-Icon ms-Icon--Clear"></i>
            </button>
          </div>
        </div>
        <button class="ms-PeoplePicker-searchMore">
          <div class="ms-PeoplePicker-searchMoreIcon">
            <i class="ms-Icon ms-Icon--Search"></i>
          </div>
          <div class="ms-PeoplePicker-searchMoreText">
            Search my groups
          </div>
        </button>
      </div>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all PeoplePicker components on the page:

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

Variants

Default PeoplePicker
<div class="ms-PeoplePicker">
  <div class="ms-PeoplePicker-searchBox">
    <div class="ms-TextField ms-TextField--textFieldUnderlined">
      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option">
    </div>
  </div>
  <div class="ms-PeoplePicker-results">
    <div class="ms-PeoplePicker-resultGroup">
      <div class="ms-PeoplePicker-resultGroupTitle">
        Contacts
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Russel Miller</div>
            <div class="ms-Persona-secondaryText">Sales</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Douglas Fielder</div>
            <div class="ms-Persona-secondaryText">Public Relations</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Grant Steel</div>
            <div class="ms-Persona-secondaryText">Sales</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Harvey Wallin</div>
            <div class="ms-Persona-secondaryText">Public Relations</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
    </div>
    <button class="ms-PeoplePicker-searchMore">
      <div class="ms-PeoplePicker-searchMoreIcon">
        <i class="ms-Icon ms-Icon--Search"></i>
      </div>
      <div class="ms-PeoplePicker-searchMoreText">
        Search my groups
      </div>
    </button>
  </div>
</div>
<script type="text/javascript">
  var PeoplePickerElements = document.querySelectorAll(".ms-PeoplePicker");
  for (var i = 0; i < PeoplePickerElements.length; i++) {
    new fabric['PeoplePicker'](PeoplePickerElements[i]);
  }
</script>
Contacts
RM
Russel Miller
Sales
DF
Douglas Fielder
Public Relations
GS
Grant Steel
Sales
HW
Harvey Wallin
Public Relations
Compact PeoplePicker
<div class="ms-PeoplePicker ms-PeoplePicker--compact">
  <div class="ms-PeoplePicker-searchBox">
    <div class="ms-TextField ms-TextField--textFieldUnderlined">
      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option">
    </div>
  </div>
  <div class="ms-PeoplePicker-results ms-PeoplePicker-results--compact">
    <div class="ms-PeoplePicker-resultGroup">
      <div class="ms-PeoplePicker-resultGroupTitle">
        Contacts
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--xs">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Russel Miller</div>
            <div class="ms-Persona-secondaryText">Sales</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--xs">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Douglas Fielder</div>
            <div class="ms-Persona-secondaryText">Public Relations</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--xs">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Grant Steel</div>
            <div class="ms-Persona-secondaryText">Sales</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--xs">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Harvey Wallin</div>
            <div class="ms-Persona-secondaryText">Public Relations</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
    </div>
    <button class="ms-PeoplePicker-searchMore">
      <div class="ms-PeoplePicker-searchMoreIcon">
        <i class="ms-Icon ms-Icon--Search"></i>
      </div>
      <div class="ms-PeoplePicker-searchMoreText">
        Search my groups
      </div>
    </button>
  </div>
</div>
<script type="text/javascript">
  var PeoplePickerElements = document.querySelectorAll(".ms-PeoplePicker");
  for (var i = 0; i < PeoplePickerElements.length; i++) {
    new fabric['PeoplePicker'](PeoplePickerElements[i]);
  }
</script>
Contacts
RM
Russel Miller
Sales
DF
Douglas Fielder
Public Relations
GS
Grant Steel
Sales
HW
Harvey Wallin
Public Relations
FacePile PeoplePicker
<div class="ms-PeoplePicker ms-PeoplePicker--facePile">
  <div class="ms-PeoplePicker-searchBox">
    <div class="ms-TextField ms-TextField--textFieldUnderlined">
      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option">
    </div>
  </div>
  <div class="ms-PeoplePicker-results ms-PeoplePicker-results--facePile">
    <div class="ms-PeoplePicker-resultGroup">
      <div class="ms-PeoplePicker-resultGroupTitle">
        Contacts
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Russel Miller</div>
            <div class="ms-Persona-secondaryText">Sales</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Douglas Fielder</div>
            <div class="ms-Persona-secondaryText">Public Relations</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Grant Steel</div>
            <div class="ms-Persona-secondaryText">Sales</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
      <div class="ms-PeoplePicker-result" tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Harvey Wallin</div>
            <div class="ms-Persona-secondaryText">Public Relations</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </div>
    </div>
    <button class="ms-PeoplePicker-searchMore">
      <div class="ms-PeoplePicker-searchMoreIcon">
        <i class="ms-Icon ms-Icon--Search"></i>
      </div>
      <div class="ms-PeoplePicker-searchMoreText">
        Search my groups
      </div>
    </button>
  </div>
  <div class="ms-PeoplePicker-selected is-active">
    <div class="ms-PeoplePicker-selectedHeader">
      <span class="ms-PeoplePicker-selectedCount">2</span>  member<span class="ms-PeoplePicker-selectedCountPlural">s</span> 
    </div>
    <ul class="ms-PeoplePicker-selectedPeople">
      <li class="ms-PeoplePicker-selectedPerson " tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Russel Miller</div>
            <div class="ms-Persona-secondaryText">Sales</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </li>
      <li class="ms-PeoplePicker-selectedPerson " tabindex="1">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
          </div>
          <div class="ms-Persona-presence">
          </div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Douglas Fielder</div>
            <div class="ms-Persona-secondaryText">Public Relations</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction">
          <i class="ms-Icon ms-Icon--Clear"></i>
        </button>
      </li>
    </ul>
  </div>
</div>
<script type="text/javascript">
  var PeoplePickerElements = document.querySelectorAll(".ms-PeoplePicker");
  for (var i = 0; i < PeoplePickerElements.length; i++) {
    new fabric['PeoplePicker'](PeoplePickerElements[i]);
  }
</script>
Contacts
RM
Russel Miller
Sales
DF
Douglas Fielder
Public Relations
GS
Grant Steel
Sales
HW
Harvey Wallin
Public Relations
2 members
  • RM
    Russel Miller
    Sales
  • DF
    Douglas Fielder
    Public Relations