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 form input that allows for the choice of one or more people.
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-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>
-
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>
-
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
-
RMRussel MillerSales
-
DFDouglas FielderPublic Relations