Search box component in the Microsoft Graph Toolkit

Important

This component is in Preview and is subject to change. The use of these components in production applications is not supported.

The Search box component renders an input control allowing searching for capabilities. This component is not connected to Microsoft Graph and should be used in collaboration with the search results component.

Example

The following example shows the use of the mgt-search-box component to enable users to type a query that would be sent to other components for rendering. You can use the code editor to see how properties and attributes change the behavior of the component.

Open this example in mgt.dev

Properties and attributes

You can use several attributes to change the behavior of the component.

Attribute	Property	Description
search-term	searchTerm	Value of the search term.
placeholder	placeholder	The placeholder rendered in the picker. Default is Search.
debounce-delay	debounceDelay	Debounce delay of the search input. Default is 300.

Events

Event	When is it emitted	Custom data	Cancelable	Bubbles	Works with custom template
searchTermChanged	Fired when the search term is changed	string.	No	Yes	No

For more information about handling events, see events.

Localization

The control exposes the following variables that can be localized. For details about how to set up localization, see Localizing components.

String name	Default value
placeholder	Search
title	Search