React Single/Multi-Select Autocomplete in SPFx

This article provides steps to implement single or multi-select autocomplete dropdown lists in a SharePoint Framework (SPFx) web part.
React Select offers a flexible and customizable component for both single and multiple selections with autocomplete and search functionality.

⚙️ Install Dependencies

Install required dependencies:

npm install react-select --save
npm install @pnp/sp --save

Import the PnP JS library and set up context:

import { sp } from "@pnp/sp/presets/all";
sp.setup({ spfxContext: this.props.context });

🧩 Define Component Interfaces

Create a new interface file ISpFxReactSelectState.ts inside your components folder:

export interface ISpFxReactSelectState {
  selectedCountry: any;
  selectedCountries: any[];
}

export interface IOption {
  value: string;
  label: string;
}

🪄 Implement React Component

Import required dependencies and create the main component:

import * as React from "react";
import "react-select/dist/react-select.css";
import Select from "react-select";
import { sp } from "@pnp/sp/presets/all";
import { ISpFxReactSelectState, IOption } from "./ISpFxReactSelectState";

export default class SpFxReactSelect extends React.Component<{}, ISpFxReactSelectState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      selectedCountry: null,
      selectedCountries: [],
    };
  }

  public async componentDidMount(): Promise<void> {
    // Load data from SharePoint list
    const items = await sp.web.lists.getByTitle("Countries").items.select("Title").get();
    const options: IOption[] = items.map((i) => ({ value: i.Title, label: i.Title }));
    this.setState({ options });
  }

  private async saveDetails(): Promise<void> {
    await sp.web.lists.getByTitle("Sales").items.add({
      Country: this.state.selectedCountry?.value,
      Countries: { results: this.state.selectedCountries.map((c) => c.value) },
    });
    alert("Data saved successfully!");
  }

  public render(): React.ReactElement<{}> {
    return (
      <div style={{ padding: "20px", maxWidth: "400px" }}>
        <h3>React Select Autocomplete Example</h3>

        <label>Country (Single Select)</label>
        <Select
          value={this.state.selectedCountry}
          options={this.state.options}
          onChange={(value) => this.setState({ selectedCountry: value })}
        />

        <label style={{ marginTop: "10px", display: "block" }}>Countries (Multi Select)</label>
        <Select
          isMulti
          value={this.state.selectedCountries}
          options={this.state.options}
          onChange={(values) => this.setState({ selectedCountries: values || [] })}
        />

        <button
          style={{
            marginTop: "15px",
            padding: "8px 16px",
            backgroundColor: "#0078d4",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
          }}
          onClick={() => this.saveDetails()}
        >
          Save
        </button>
      </div>
    );
  }
}

⚡ Deploy the Solution

To build, bundle, and deploy the SPFx solution, run the following commands:

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

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

📂 GitHub Sample Project

View full SPFx project on GitHub:React Single/Multi-Select Autocomplete in SPFx

GitHub

✅ Summary

Using React Select with PnP JS, you can quickly build dynamic dropdowns in SPFx web parts.
It’s ideal for scenarios requiring multi-select, search, and autocomplete capabilities in modern SharePoint sites.