Skip to content
  • There are no suggestions because the search field is empty.

How to configure the PnP - Search Box 

In this article you'll learn how to add and configure a PnP Search Box to your PnP Search Results 

1. Overview 

The PnP Search box Web Part allows users to enter free text search queries connected to a 'Search Results' Web Part. 

2. Watch the Tutorial to see it in practice

The PnP Search Box and PnP Search Filters web parts are designed to work together through the PnP Dynamic Data connection. Together, they let users search for content and then narrow down the results using filters such as file type, author, or managed properties.

A typical PnP Modern Search setup looks like this:

PnP Search Box         │         ▼ PnP Search Results ◄──────────── PnP Search Filters
  • Search Box sends the search query (e.g., "HR policy").
  • Search Results displays items matching that query.
  • Search Filters reads the available refiners from the Search Results and lets users filter them further.

Important: The Search Box does not connect directly to the Search Filters. Both web parts interact through the Search Results web part.

! Important ! Make sure that the  placeholder {inputQueryText} is added to your Query template of your PnP Search Results

 

3. Complete Configuration of PnP Search Box

A. Search box settings 

Settings Description Default value
Placeholder text The placeholder text to display in the search box. "Enter your search terms..."
Send the query to a new page

Sends the search query text to a new page.

When enabled, following additional Properties are available:

 

  • Query input tranformation template : {inputQueryText}

  • Page URL : https://..... 

  • Opening behavior :

    • Use the current tab,

    • Open in a new tab 

  • Send Method:

    • URL fragment

    • Query string parameter

 

 Off
Reset query on clear Sends a new search query request when the search box is cleared. On

A query string parameter is part of the URL that is sent to the server. It is typically used to pass information to the application or backend (?query=value) 

A URL fragment is the part of the URL after the # symbol. It is handled only by the browser and is not sent to the server. 

B. Search Box Styling 

The search box styling section allows you to customize the visual appearance of the search box to match your branding and design requirements.

Setting Description Default value
Font size Controls the font size (in pixels) for both the input text and search button. This provides a unified font size across the entire search box. 14px
Input field height The height (in pixels) of the search input field. 32px
Border color The border color of the search box. Theme primary color
Border radius The border radius (in pixels) for rounded corners. 2px
Background color The background color of the search input field. White
Text color The color of the text entered in the search box. Theme text color
Placeholder text color The color of the placeholder text when the search box is empty. WCAG AA compliant default ensures 4.5:1 contrast ratio. #605e5c (WCAG AA compliant)
Search button color The background color of the search button. Theme primary color
Show search button when input is empty Display the search button even when the search input field is empty. Off
Search button display Choose how the search button appears: Icon only, Text only, or Both (text with icon). Icon only
Search icon name The Fluent UI icon name to display on the search button (e.g., Search, Forward, ChevronRight). See Fluent UI Icons for available icons. Search
Search button text The text to display on the search button when using "Text only" or "Both" display modes. "Search"
Reset styling to default Reset all styling options to their default values. N/A

C. Web part title styling

The title styling section allows you to customize the visual appearance of the web part title.

Setting Description Default value
Title font The font family to use for the web part title. Segoe UI
Title font size Controls the font size (in pixels) for the web part title. 16px
Title font color The color of the web part title text. Theme primary color
Reset title styling to default Reset all title styling options to their default values. N/A

D. Query Suggestions 

Setting Description Default value
Enable query suggestions Enable or disable query suggestions. Off
Configure available providers Enable or disable the suggestions providers available for this Web Part. By default, only the "SharePoint Static search suggestions" is available (disabled by default).

See How to enable AI assistant in PnP search results? for full AI configuration if you would like to use Involv AI assistant. 

  
Number of suggestions to show per group The number of suggestions to show per group. 10.

E. Connections 

Setting Description Default value
Use dynamic data source as default input 

Enable or disable the use of a dynamic data source as default input 

Possible Connections: 

  • Page environment 
  • PnP Search Filters
  • PnP Search Results
 Off
Page environment properties 

Site Properties: 

  • Site Link
  • Site Collection Link 
  • List Link 
  • Item ID 
  • Site Classification 
  • Site Title 
  • Site Description
  • Site Logo 

Current User Information: 

  • User name 
  • User Email 
  • Login name 

Query String:

  • Queryparameters 
  • URL Fragment 

Search

  
PnP Search Filters

Pnp Search Filter's Properties 

Search Filters Web Part Properties:

  • filterConfiguration 
  • Selected Filters 
  • filterOperators
  • InstanceID
  • ConnectedResultsSourceReferences
  
PnP Search Results 

PnP Search Result Properties 

  • availableFieldsFromResults
  • available Filters
  • Selected Items 
  • handlebarsContext 
  • Total Count 
  • connectedFilterSourceReference
  

Visibility 

Show in Mobile and Email view : Switched on by default 

Audience Targeting

You can control the visibility of the search box based on user group membership.

▾