Use the MGT SearchBox control in a SPFx solution
Tags: development, mgt, spfx
Published: 2024-07-04 06:42:59

---
title: Use the MGT SearchBox control in a SPFx solution
published: true
date: 2024-07-03 09:00:00 UTC
tags: Development,MGT,SPFx
canonical_url: https://iamguidozam.blog/2024/07/03/use-the-mgt-searchbox-control-in-a-spfx-solution/
---

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the **SearchBox** 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-searchbox)._

* * *

The **SearchBox** control is used to display a textbox control to enable the user to search for something, this control can be used for whatever you need to.

I’ve prepared a sample solution to show the possible control configurations so, starting with the whole result here are the instances of the control:

![](https://iamguidozam.blog/wp-content/uploads/2024/05/image-7.png?w=1015)

The **basic usage** one just show the control without any configuration.

With the **custom search term** instance you can specify a custom search value to be set in the control value.

The **custom placeholder** instance shows how the control renders when setting a custom placeholder instead of the default placeholder string.

In the end there are two instances that display a more real world scenario.

The **custom debounce delay** instance shows how to handle the change of the search term after a pre defined delay:

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

The **search term changed event** instance display a similar behavior of the previous control instance but it will not get delayed:

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

## Show me the code

To enable the use of the **SearchBox** control first thing first you have to import it from the MGT React package:

```
import { SearchBox } from '@microsoft/mgt-react';
```

The basic, but not functional configuration, is the following:

```
<SearchBox></SearchBox>
```

This is just to display how the control renders without any customization.

The following instance displays how to programmatically set the search term through the **searchTerm** property:

```
<SearchBox searchTerm={"custom term"}></SearchBox>
```

Another possible configuration for the UX is the **placeholder** property where it’s possible to specify a custom placeholder value to be displayed when no value has been specified:

```
<SearchBox
 placeholder={strings.Placeholder}>
</SearchBox>
```

In the next sample you can see how to use the **debounceDelay** property, this property set the **milliseconds** delay before triggering the **searchTermChanged** event:

```
<SearchBox
 debounceDelay={2000}
 searchTermChanged={(e) => 
 this.setState({ changedDebounceSearchTerm: e?.detail })}>
</SearchBox>
```

Finally the **searchTermChanged** property allows to specify what to do when a new search text has been specified, to access the inserted text it’s possible to access the **detail** property of the method argument:

```
<SearchBox
 searchTermChanged={(e) => 
 this.setState({ changedSearchTerm: e?.detail})}>
</SearchBox>
```

## Conclusions

The control **SearchBox** does not offer a lot of customization options but it’s pretty useful, moreover because it’s already styled with the Fluent UI style!

Hope this helps!