PeoplePicker

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
  • Russel Miller
    Sales
  • Douglas Fielder
    Public Relations
Other results
  • Russel Miller
    Sales
  • Douglas Fielder
    Public Relations
  • Grant Steel
    Technical Support
    • Jessica Fischer
      Public Relations

    • Grant Steel (bask)
      Public Relations
  • Harvey Wallin
    Delivery
  • Marcus Lauer
    Marketing

Compact

Use the extra small Persona component to fit more results.

Top results
  • Russel Miller
    Sales
  • Douglas Fielder
    Public Relations
Other results
  • Russel Miller
    Sales
  • Douglas Fielder
    Public Relations
  • Grant Steel
    Technical Support

    • Jessica Fischer
      Public Relations
    • Grant Steel (bask)
      Public Relations
  • Harvey Wallin
    Delivery
  • Marcus Lauer
    Marketing
Showing top 5 results
Search Contacts & Directory

Members List

Has a smaller search field.

  • RM
    Russel Miller
    Sales
  • DF
    Douglas Fielder
    Public Relations
  • JF
    Jessica Fischer
    Public Relations
  • GS
    Grant Steel (bask)
    Public Relations
  • HW
    Harvey Wallin
    Delivery
  • ML
    Marcus Lauer
    Marketing
newly added members

    Facepile

    Presents the selected people in a list below the search field, rather than inline.

    Suggested contacts
    • RM
      Russel Miller
      Sales
    • DF
      Douglas Fielder
      Public Relations
    • JF
      Jessica Fischer
      Public Relations
    • MG
      Marcel Groce
      Marketing
    • GS
      Grant Steel
      Public Relations
    • HW
      Harvey Wallin
      Delivery
    • ML
      Marcus Lauer
      Marketing
    Search Contacts & Directory
    3 members
    • AL
      Persona image
      Alton Lafferty
      Accountant
    • DF
      Douglas Fielder
      Public Relations
    • ML
      Marcus Lauer
      Technical Support
    AL
    Alton Lafferty
    Interior Designer, Contoso
    Office: 7/1234
    Available - Video capable
    • View profile

    More options

    Disconnected

    If the network is unavailable, you can present an error message in the search more area.

    Top results
    • Russel Miller
      Sales
    • Douglas Fielder
      Public Relations
    Other results
    • Russel Miller
      Sales
    • Douglas Fielder
      Public Relations
    • Grant Steel
      Technical Support
      • Jessica Fischer
        Public Relations

      • Grant Steel (bask)
        Public Relations
    • Harvey Wallin
      Delivery
    • Marcus Lauer
      Marketing
    We are having trouble connecting to the server.
    Please try again in a few minutes.

    Using this component

    1. 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>
      
    2. Copy the HTML from one of the samples above into your page.
    3. 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>
      
    4. Verify that the component is working the same as in the sample above.
    5. 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.