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.

PeoplePicker

Overview

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

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-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