MGT People Picker control in SPFx
Tags: mgt, spfx
Published: 2024-06-13 10:04:58

---
title: MGT People Picker control in SPFx
published: true
date: 2024-06-12 09:00:00 UTC
tags: MGT,SPFx
canonical_url: https://iamguidozam.blog/2024/06/12/mgt-people-picker-control-in-spfx/
---

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the **PeoplePicker** control.

* * *

_I will not cover in detail the implementation, it’s not the scope of this post, if you’re wondering how to achieve all the steps to enable you to use MGT inside SPFx you can have a look at my [previous post](https://iamguidozam.blog/2023/12/20/use-microsoft-graph-toolkit-with-spfx-and-react/) or have a look at the code of this [sample here](https://github.com/GuidoZam/blog-samples/tree/main/MGT/mgt-people-picker-spfx)._

* * *

The **PeoplePicker** control is used to display a dropdown control that enables the search and selection of users and/or groups.

I’ve built a sample that shows various configuration for the control, before viewing the code let’s have a look on how the control displays in a few different fashions:

![](https://iamguidozam.blog/wp-content/uploads/2024/06/image-13.png?w=1024)

The name of the sections are pretty self-explanatory but for the sake of completeness here is a description of every section.

**Minimal usage** is the default configuration of the control:

![](https://iamguidozam.blog/wp-content/uploads/2024/03/image-12.png?w=716)

**Show max 3** is used to enable the selection of user but limiting the results to only 3:

![](https://iamguidozam.blog/wp-content/uploads/2024/03/image-13.png?w=343)

**Show only groups** will only display the groups instead of the users:

![](https://iamguidozam.blog/wp-content/uploads/2024/06/mgt-people-picker-control-in-spfx-1.png?w=564)

**Enable only single selection** will allow only a single user selection:

![](https://iamguidozam.blog/wp-content/uploads/2024/06/image-8.png?w=457)

**Disable images** will display the users and groups without loading the avatar images:

![](https://iamguidozam.blog/wp-content/uploads/2024/03/image-14.png?w=354)

**Default selected users** show how an instance of the control looks like when a user (or multiple users) is already programmatically selected, in this sample I selected two users:

![](https://iamguidozam.blog/wp-content/uploads/2024/06/image-12.png?w=612)

## Show me the code

To use the **PeoplePicker** control you have to import it using the following:

```
import { PeoplePicker, PersonType } from '@microsoft/mgt-react';
```

The **PersonType** enum will be used to filter the results when only showing groups.

The minimal instance configuration of the control is instantiated only using the tag and without any properties set:

```
<PeoplePicker />
```

Following there are the other control instances where I set a specific property to show the control in action.

The configuration to limit the number of result shown is achieved setting the **showMax** property, in this case it will be set to three entries:

```
<PeoplePicker showMax={3} />
```

The **type** property is used to filter the results by type, the possible values are:

- _any_
- _person_
- _group_

In this instance the _group_ value is used:

```
<PeoplePicker type={PersonType.group} />
```

The **selectionMode** property accept two possible values:

- _single_: allow a single user/group selection
- _multiple_: allow multiple users/groups selection. This is the default value.

In this example the _single_ value is used:

```
<PeoplePicker selectionMode="single" />
```

The **disableImages** property allow or disable the person image fetching and displaying, if the property is set to _true_ the control will only display the initials, if the property is set to _false_ the images will be shown. In the sample the property has been set to _true_ to show only the user/group:

```
<PeoplePicker disableImages={true} />
```

For last the **selectedPeople** property allows a programmatically default people selection so it displays the specified people as already selected in the UI and it’s achieved as follow:

```
<PeoplePicker selectedPeople={[{
  displayName: "Nestor Wilke"
 },
 {
  displayName: "Sample User"
 }]} />
```

If you want to select a user you can also specify the **userPrincipalName** property in the objects of the array and if the user exists in the tenant the control will load the user properties such as the person image.

## Conclusions

There are many other properties for the People Picker control that I have not covered in this article, if you’re interested in checking out the other properties you can check out the official article [here](https://learn.microsoft.com/en-us/graph/toolkit/components/people-picker?tabs=html#properties).

The People Picker control is pretty useful, especially when there’s the needing of selecting people or groups and display it to the user.

Hope this helps!