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

Prop	Type	Default	Notes
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.
maximumSuggestion	number	5	Suggestions shown in the dropdown.
selectionLimit	number	1000	Max users selectable.
filterGroupId	number	—	Restrict results to a SharePoint group.
disabled	boolean	—	Disable interaction.

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

See also

• Components overview