SPFx Property Panes: Building Configurable Web Parts

Property panes let users configure your SPFx web parts without touching code. Here’s how to build them effectively.

Basic Property Pane

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [{
      header: { description: "Settings" },
      groups: [{
        groupName: "Display Options",
        groupFields: [
          PropertyPaneTextField('title', { label: 'Title' }),
          PropertyPaneToggle('showHeader', { label: 'Show Header' }),
          PropertyPaneSlider('itemCount', { label: 'Items', min: 1, max: 50 })
        ]
      }]
    }]
  };
}

Property Types

• TextField: Text input
• Toggle: Boolean switch
• Dropdown: Select from options
• Slider: Numeric range
• Checkbox: Multiple selections

Accessing Properties

public render(): void {
  const element = React.createElement(MyComponent, {
    title: this.properties.title,
    showHeader: this.properties.showHeader,
    itemCount: this.properties.itemCount
  });
  ReactDom.render(element, this.domElement);
}

References

• Property Pane Documentation