SPFx Property Pane TextField Multiline: Creating a Long Text Field

Introduction

In this article, we continue exploring the native SharePoint Framework Property Pane controls.

This time, we will use PropertyPaneTextField again, but with one important difference:

multiline: true

This turns the normal text field into a larger text box that allows users to enter longer content.

This is useful for scenarios such as:

descriptions;
introductions;
instructions;
notes;
custom messages;
short paragraphs.

What We Are Building

The Web Part will have one configurable property:

description: string;

The user types a longer text in the Property Pane, and the Web Part renders that text on the page.

The flow is:

			
PropertyPaneTextField multiline
        ↓
this.properties.description
        ↓
React props
        ↓
Rendered text

		

React Component Props

First, the React component needs a props interface.

			
export interface IPropertyPaneMultilineTextWpProps {
  description: string;
}

This means the component expects to receive a string called description.

React Component

The component receives the value and renders it.

			
import * as React from 'react';
import { IPropertyPaneMultilineTextWpProps } from './IPropertyPaneMultilineTextWpProps';
const PropertyPaneMultilineTextWp: React.FC<IPropertyPaneMultilineTextWpProps> = (props) => {
  return (
    <div>
      <h1>Property Pane Multiline Text</h1>
      <p>{props.description}</p>
    </div>
  );
};
export default PropertyPaneMultilineTextWp;

		

The component does not know where the text comes from.

It only receives:

props.description

This keeps the React component simple and reusable.

Web Part Properties

In the Web Part file, define the property used by the Property Pane.

			
export interface IPropertyPaneMultilineTextWebPartProps {
  description: string;
}

This tells SPFx that the Web Part has one configurable property named description.

Passing the Property to React

Inside the render() method, pass the value from this.properties to the React component.

			
const element: React.ReactElement<IPropertyPaneMultilineTextWpProps> =
  React.createElement(
    PropertyPaneMultilineTextWp,
    {
      description: this.properties.description
    }
  );
ReactDom.render(element, this.domElement);

		

The important line is:

description: this.properties.description

The left side is the React prop.

The right side is the value stored by SPFx.

Creating the Multiline Field

The multiline field is created with PropertyPaneTextField.

			
PropertyPaneTextField('description', {
  label: 'Description',
  multiline: true,
  rows: 5
})

		

The first argument is very important:

'description'

This is the key that connects the Property Pane field to:

this.properties.description

So when the user types text in the Property Pane, SPFx stores it in that property.

Understanding `multiline: true`

The regular PropertyPaneTextField creates a single-line input.

			
PropertyPaneTextField('description', {
  label: 'Description'
})

But when we add:

multiline: true

the field becomes a multiline text area.

			
PropertyPaneTextField('description', {
  label: 'Description',
  multiline: true,
  rows: 5
})

		

The rows property controls the initial visible height of the field.

In this example:

rows: 5

means the Property Pane will show approximately five lines of text.

Full Property Pane Example

			
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneTextField('description', {
                label: 'Description',
                multiline: true,
                rows: 5
              })
            ]
          }
        ]
      }
    ]
  };
}

		

Full Web Part Example

			
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'PropertyPaneMultilineTextWebPartStrings';
import PropertyPaneMultilineTextWp from './components/PropertyPaneMultilineTextWp';
import { IPropertyPaneMultilineTextWpProps } from './components/IPropertyPaneMultilineTextWpProps';
export interface IPropertyPaneMultilineTextWebPartProps {
  description: string;
}
export default class PropertyPaneMultilineTextWebPart
  extends BaseClientSideWebPart<IPropertyPaneMultilineTextWebPartProps> {
  public render(): void {
    const element: React.ReactElement<IPropertyPaneMultilineTextWpProps> =
      React.createElement(
        PropertyPaneMultilineTextWp,
        {
          description: this.properties.description
        }
      );
    ReactDom.render(element, this.domElement);
  }
  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }
  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: 'Description',
                  multiline: true,
                  rows: 5
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

		

Why This Example Matters

This example reinforces the same SPFx pattern we saw before:

			
User edits the Property Pane
        ↓
SPFx updates this.properties
        ↓
render() runs again
        ↓
React receives new props
        ↓
The UI updates

		

The important lesson is that the property type is still string.

The difference is only the Property Pane control configuration.

A simple text field and a multiline text field both store text, but the multiline version gives the user a better editing experience for longer content.

When Should You Use a Multiline Text Field?

Use PropertyPaneTextField with multiline: true when the user needs to enter more than a short label.

Good examples include:

Web Part description;
introduction text;
instructions;
notes;
warning messages;
custom footer text;
short content blocks.

For a short value, use a normal PropertyPaneTextField.

For longer content, use the multiline version.

Conclusion

The multiline version of PropertyPaneTextField is a simple but important improvement over the default text field.

It allows users to configure longer text directly from the Property Pane while keeping the implementation almost identical to the single-line version.

The key configuration is:

multiline: true

and optionally:

rows: 5

This is another small step toward mastering the SPFx Property Pane before moving to more advanced controls.

References

SharePoint Framework Property Pane overview:
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane

Build your first SPFx Web Part:
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

@microsoft/sp-property-pane API reference:
https://learn.microsoft.com/en-us/javascript/api/sp-property-pane

IPropertyPaneTextFieldProps API reference:
https://learn.microsoft.com/en-us/javascript/api/sp-property-pane/ipropertypanetextfieldprops

React documentation:
https://react.dev/