Reusable property pane controls for the SharePoint Framework solutions

This repository provides developers with a set of reusable property pane controls that can be used in their SharePoint Framework (SPFx) solutions.


In order to migrate to v2 it is advicded to follow this guide: Migrating from V1.


The controls project has a minimal dependency on SharePoint Framework version 1.3.0. Be aware that the controls might not work in solutions your building for on-premises. As for on-premises solutions version 1.1.0 will get used.

Getting started


To get started you have to install the following dependency to your project: @pnp/spfx-property-controls.

Enter the following command to install the dependency to your project:

npm install @pnp/spfx-property-controls --save --save-exact



Since v1.7.0 the localized resource path will automatically be configured during the dependency installing.

Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json and adding the following line to the localizedResources property:

"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"


All controls gather telemetry to verify the usage. Only the name of the control and related data gets captured.

More information about the service that we are using for this can be found here: PnP Telemetry Proxy.

Since version 1.17.0 it is possible to opt-out of the telemetry by adding the following code to your web part:

import PnPTelemetry from "@pnp/telemetry-js";
const telemetry = PnPTelemetry.getInstance();


The following controls are currently available: - PropertyFieldCodeEditor (Property pane code editor) - PropertyFieldCollectionData (Property pane collection data editor) - PropertyFieldColorPicker (Property pane color picker) - PropertyFieldDateTimePicker (Property pane date and time selector) - PropertyFieldFilePicker (Property pane file picker) - PropertyFieldFolderPicker (Property pane folder picker) - PropertyFieldListPicker (Property pane list selector) - PropertyFieldMessage (Property pane message) - PropertyFieldMultiSelect (Property pane multi select dropdown) - PropertyFieldNumber (Property pane number editor) - PropertyFieldOrder (Property pane ordered list editor) - PropertyFieldPassword (Property pane password editor) - PropertyFieldPeoplePicker (Property pane people / group selector) - PropertyFieldRoleDefinitionPicker (Property pane role definition picker) - PropertyFieldSearch (Property pane search box) - PropertyFieldSitePicker (Property pane site selector) - PropertyFieldSpinButton (Property pane spin button) - PropertyFieldSpinner (Property pane spinner) - PropertyFieldSwatchColorPicker (Property pane color selector) - PropertyFieldTermPicker (Property pane managed metadata term selector) - PropertyFieldEnterpriseTermPicker (Property pane managed metadata term selector for enterprise scenarios) - PropertyFieldViewPicker (Property pane view selector) - PropertyPaneMarkdownContent (Property pane markdown content) - PropertyPanePropertyEditor (Property pane control that allows raw editing, export and import of webpart properties) - PropertyPaneWebPartInformation (Property pane webpart information panel)

The following controls are extended controls that show a callout next to the label - PropertyFieldButtonWithCallout (Property button field with callout) - PropertyFieldCheckboxWithCallout (Property checkbox field with callout) - PropertyFieldChoiceGroupWithCallout (Property choice group field with callout) - PropertyFieldDropdownWithCallout (Property dropdown field with callout) - PropertyFieldLabelWithCallout (Property label field with callout) - PropertyFieldLinkWithCallout (Property link field with callout) - PropertyFieldSliderWithCallout (Property slider field with callout) - PropertyFieldTextWithCallout (Property text field with callout) - PropertyFieldToggleWithCallout (Property toggle field with callout)