Skip to content

TeamChannelPicker control

This control allows you to select one or multiple Team Channels based on user's permissions.


You can also check out Microsoft Teams Channel Picker component in the Microsoft Graph Toolkit.

Here is an example of the control:


SelectTeamChannelPicker single selection mode:


How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the control into your component:
import { TeamChannelPicker } from "@pnp/spfx-controls-react/lib/TeamChannelPicker";
  • Use the TeamChannelPicker control in your code as follows:
<TeamChannelPicker    label="Select Team channel"
  • The _onSelectedTeamChannels change event returns the team channel(s) and can be implemented as follows:
const _onSelectedTeamChannels ((tagList: ITag[]) => {


The SelectTeamChannelPicker control can be configured with the following properties:

Property Type Required Description
teamId string yes Id of Team to get channels
appcontext WebPartContext | ExtensionContext yes The context object of the SPFx loaded webpart or customizer.
selectedChannels ITag[] yes Array with selected channels
itemLimit number no number of allowed selected channels
label string no Label of Picker
styles IBasePickerStyles no Customer Styles of Picker
onSelectedChannels: (tagsList:ITag[]) => void; yes callBack with channels Selected

MSGraph Permissions required

This control required the flowing scopes :

at least : Team.ReadBasic.All, Channel.ReadBasic.All,