Skip to main content

PeoplePicker

PeoplePicker lets users search for and select people from a SharePoint tenant. It's a controlled component: you hold the selected users and update them from setSelectedUsers. A ComboBoxPeoplePicker variant offers a combo-box presentation with the same data model.

SPFx component

Imported from @spartanfx/react/spfx; needs a PnPjs SPFI instance and the SPFx webPartContext (used to resolve user photos).

When to use​

  • Assign owners/reviewers, @-mention people, or capture any user field backed by SharePoint.

Import​

import { PeoplePicker, ComboBoxPeoplePicker } from '@spartanfx/react';

Basic usage​

Hold the selection in state; the picker calls setSelectedUsers when it changes.

function AssignReviewers({ sp, webPartContext }) {
  const [users, setUsers] = React.useState([]);
  return (
    <PeoplePicker
      sp={sp}
      webPartContext={webPartContext}
      selectedUsers={users}
      setSelectedUsers={setUsers}
      selectionLimit={3}
    />
  );
}

Combo-box variant​

ComboBoxPeoplePicker takes the same core props with a combo-box UI:

<ComboBoxPeoplePicker
  sp={sp}
  webPartContext={webPartContext}
  selectedUsers={users}
  setSelectedUsers={setUsers}
/>

Key props​

PropTypeDefaultNotes
sp (required)SPFI—PnPjs instance.
webPartContext (required)WebPartContext—SPFx context (resolves photos, current site).
selectedUsers (required)IPeoplePickerUser[]—Current selection (you own it).
setSelectedUsers (required)(users) => void—Update the selection.
maximumSuggestionnumber5Suggestions shown in the dropdown.
selectionLimitnumber1000Max users selectable.
filterGroupIdnumber—Restrict results to a SharePoint group.
disabledboolean—Disable interaction.

See the full generated reference: PeoplePicker API ↗ · ComboBoxPeoplePicker ↗.

See also​