People Picker
A form input that allows for the choice of one or more people.
Variants
Default
Uses the standard sized Persona component.
Top results
Douglas Fielder
Public Relations
Other results
Douglas Fielder
Public Relations
Grant Steel
Technical Support
Jessica Fischer
Public Relations
Grant Steel (bask)
Public Relations
Showing top 5 results
Search Contacts & Directory
Compact
Use the extra small Persona component to fit more results.
Top results
Douglas Fielder
Public Relations
Other results
Douglas Fielder
Public Relations
Grant Steel
Technical Support
Jessica Fischer
Public Relations
Grant Steel (bask)
Public Relations
Showing top 5 results
Search Contacts & Directory
Members List
Has a smaller search field.
People picker
RM
DF
Douglas Fielder
Public Relations
JF
Jessica Fischer
Public Relations
GS
Grant Steel (bask)
Public Relations
HW
ML
Facepile
Presents the selected people in a list below the search field, rather than inline.
Douglas Fielder
Public Relations
Jessica Fischer
Public Relations
Grant Steel
Public Relations
Search Contacts & Directory
AL
Alton Lafferty
Accountant
Douglas Fielder
Public Relations
Marcus Lauer
Technical Support
AL
Alton Lafferty
Interior Designer, Contoso
Office: 7/1234
Available - Video capable
Personal: 555.206.2443
Work: 555.929.8240
RM
DF
Douglas Fielder
Public Relations
Manager
GS
Staff
HW
Harvey Wallin
Public Relations
ML
Marcus Lauer
Technical Support
MG
JF
Jessica Fischer
Marketing
More options
Disconnected
If the network is unavailable, you can present an error message in the search more area.
Top results
Douglas Fielder
Public Relations
Other results
Douglas Fielder
Public Relations
Grant Steel
Technical Support
Jessica Fischer
Public Relations
Grant Steel (bask)
Public Relations
We are having trouble connecting to the server. Please try again in a few minutes.
Using this component
Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="jquery-2.2.1.min.js"></script>
<script src="jquery.fabric.min.js"></script>
</head>
Copy the HTML from one of the samples above into your page.
Add the following <script>
tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
$(document).ready(function() {
if ($.fn.PeoplePicker) {
$('.ms-PeoplePicker').PeoplePicker();
}
});
</script>
Verify that the component is working the same as in the sample above.
Replace the sample HTML content with your content.
Dependencies
This component uses Persona and PersonaCard to display people and Label for the Members List variant. It also uses a Spinner when searching for results.