SPFx PropertyPaneLabel: Displaying Informational Text in the Property Pane

Introduction

As we continue exploring the native SharePoint Framework Property Pane controls, we now arrive at one of the simplest controls available: PropertyPaneLabel.

Unlike most controls we’ve studied so far, the Label is not used to collect data.

It simply displays text to the user.

Although it appears simple, it is extremely useful for organizing the Property Pane and making Web Part configuration easier to understand.

What is PropertyPaneLabel?

PropertyPaneLabel displays static informational text inside the Property Pane.

It does not:

• store configuration values;
• execute actions;
• interact with React;
• update this.properties.

Its only responsibility is to display information.

What We Are Building

In this example, the Property Pane displays the following message:

Use the Property Pane to configure this Web Part.

Nothing more.

This demonstrates the purpose of the Label control.

Creating the Label

The implementation is very simple.

PropertyPaneLabel('informationLabel', {
    text: 'Use the Property Pane to configure this Web Part.'
})

The first parameter is:

'informationLabel'

This is only the identifier of the control.

Unlike TextField, Dropdown, Toggle, or Slider, this value is not stored anywhere.

Why Doesn’t It Use this.properties?

This is one of the biggest differences between PropertyPaneLabel and the controls we’ve studied previously.

For example:

PropertyPaneTextField('title', ...)

updates:

this.properties.title

A Toggle updates:

this.properties.enableFeature

A Slider updates:

this.properties.maxItems

The Label updates absolutely nothing.

There is no:

this.properties.informationLabel

because no information needs to be stored.

Why Are the Interfaces Empty?

Since the Label does not transfer data to the Web Part or to React, the interfaces remain empty.

Web Part:

export interface IPropertyPaneLabelWebPartProps {
}

React:

export interface IPropertyPaneLabelWpProps {
}

This is completely normal.

Unlike previous examples, this control has no associated property.

Complete Example

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
        pages: [
            {
                header: {
                    description: strings.PropertyPaneDescription
                },
                groups: [
                    {
                        groupName: strings.BasicGroupName,
                        groupFields: [
                            PropertyPaneLabel('informationLabel', {
                                text: 'Use the Property Pane to configure this Web Part.'
                            })
                        ]
                    }
                ]
            }
        ]
    };
}

When the Property Pane opens, the message is displayed immediately.

Property Flow

Unlike the previous controls, there is no property flow.

The execution looks like this.

Property Pane
↓
PropertyPaneLabel
↓
Display text

Notice that there is no:

this.properties
↓
render()
↓
React

The Label never communicates with the React component.

When Should You Use a Label?

Although simple, Labels greatly improve the user experience.

They are commonly used for:

• Section descriptions
• Configuration instructions
• Warning messages
• Short explanations
• Group titles
• Additional guidance

Instead of expecting users to understand every option, a Label can explain what each section does.

Example

Instead of displaying only this:

Maximum Items
[ Slider ]

you can display:

Display Settings
Choose how many items should appear on the page.
Maximum Items
[ Slider ]

The Property Pane becomes much easier to understand.

Label vs TextField

Many beginners confuse these controls.

If the user must type something, use a TextField.

If you simply want to explain something, use a Label.

Best Practices

Use Labels to:

• Explain groups of settings.
• Improve readability.
• Organize large Property Panes.
• Provide short instructions.

Avoid using long paragraphs.

If extensive documentation is required, consider using a PropertyPaneLink that directs the user to external documentation.

Why This Example Matters

As our Property Pane becomes larger, organization becomes increasingly important.

A well-designed Property Pane is not only about collecting configuration values.

It should also guide users through the available options.

The Label is one of the simplest tools for achieving this.

Classification of Native Property Pane Controls

At this point in our series, we can already classify the controls we’ve learned.

Configuration Controls

These controls store values inside this.properties.

• PropertyPaneTextField
• PropertyPaneCheckbox
• PropertyPaneToggle
• PropertyPaneDropdown
• PropertyPaneChoiceGroup
• PropertyPaneSlider

Command Controls

These controls execute actions.

• PropertyPaneButton

Informational Controls

These controls only display information.

• PropertyPaneLabel

This classification makes it much easier to understand the role of each Property Pane control.

Conclusion

PropertyPaneLabel is one of the simplest controls available in SharePoint Framework.

Although it neither stores data nor executes actions, it plays an important role in creating organized and user-friendly Property Panes.

As Web Parts become more complex, Labels help users understand configuration options and reduce confusion.

Sometimes, improving the user experience is not about adding new functionality—it is simply about communicating more clearly.

References

SharePoint Framework Overview

Integrate with the Property Pane

PropertyPaneLabel API

IPropertyPaneLabelProps API

React Documentation