PnP Taxonomy Picker in the SharePoint Framework (SPFx) Web Part

This article demonstrates how to use the PnP Taxonomy Picker in the SharePoint Framework (SPFx) web part.
The Taxonomy Picker allows users to select terms from the Term Store, supporting both single and multiple term selections.

⚙️ Install Required Dependencies

Install PnP controls for React:

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

🧩 Configure Properties and State

Create or update ISpfxPnPTaxonomyPickerState.ts to define your web part state:

import { IPickerTerms } from '@pnp/spfx-controls-react/lib/TaxonomyPicker';

export interface ISpfxPnPTaxonomyPickerState {
  SelectedTerm: IPickerTerms;
}

⚛️ Implement the Taxonomy Picker Component

Edit the main component file: SpfxPnPTaxonomyPicker.tsx

import * as React from 'react';
import styles from './SpfxPnPTaxonomyPicker.module.scss';
import { ISpfxPnPTaxonomyPickerProps } from './ISpfxPnPTaxonomyPickerProps';
import { ISpfxPnPTaxonomyPickerState } from './ISpfxPnPTaxonomyPickerState';
import { TaxonomyPicker, IPickerTerms } from '@pnp/spfx-controls-react/lib/TaxonomyPicker';
import { sp } from '@pnp/sp/presets/all';

export default class SpfxPnPTaxonomyPicker extends React.Component<ISpfxPnPTaxonomyPickerProps, ISpfxPnPTaxonomyPickerState> {
  constructor(props: ISpfxPnPTaxonomyPickerProps) {
    super(props);
    this.state = { SelectedTerm: [] };
    this._getItems = this._getItems.bind(this);
  }

  private async _getItems() {
    const terms = await sp.web.lists.getByTitle('GroupTags').items.getAll();
    console.log(terms);
  }

  private onTaxPickerChange(terms: IPickerTerms): void {
    console.log('Terms:', terms);
    this.setState({ SelectedTerm: terms });
  }

  public render(): React.ReactElement<ISpfxPnPTaxonomyPickerProps> {
    return (
      <div className={styles.spfxPnPTaxonomyPicker}>
        <h2>{this.props.description}</h2>
        <TaxonomyPicker
          allowMultipleSelections={true}
          termsetNameOrID="Department"
          panelTitle="Select Term(s)"
          label="Select Department Terms"
          context={this.props.context}
          onChange={this.onTaxPickerChange.bind(this)}
          isTermSetSelectable={false}
        />
      </div>
    );
  }
}

🧠 Explanation

allowMultipleSelections → Enables selecting more than one term.
termsetNameOrID → Specifies the term set name or ID from the SharePoint Term Store.
panelTitle → Title shown at the top of the picker dialog.
context → Passes the SharePoint context from your web part.
onChange → Callback function that updates the selected terms.

🔍 Fetch and Display Term Information

Add the following function to fetch data from a SharePoint list using selected taxonomy terms:

private async getData() {
  const items = await sp.web.lists.getByTitle('GroupTags').items.getAll();
  console.log('Fetched items:', items);
}

You can extend this logic to display data based on term selection or store selected terms in a SharePoint list.

🚀 Deploy the Solution

Run the following commands to bundle and deploy:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your App Catalog, deploy it, and add the web part to a SharePoint page.

📂 GitHub Source

View full SPFx project on GitHub:PnP Taxonomy Picker in SPFx

GitHub

✅ Summary

This example demonstrates how to use the PnP Taxonomy Picker in SPFx to interact with SharePoint’s Managed Metadata Service (MMS).
You can customize it further to create filters, tagging interfaces, or metadata-driven dashboards.