Display Characters Remaining in SharePoint Framework Property Pane Text Field

Web Design & Development

I recently created a custom SharePoint Framework (SPFx) web part that had some text fields in the property pane with character limits. I wanted the page authors to have some feedback as they typed so they knew how many characters were left, so I used the description property with some string concatenation to make it work.

PropertyPaneTextField("tagline", {
  label: strings.TaglineFieldLabel,
  maxLength: 80,
  description: `${strings.TaglineFieldDescriptionBeforeCount}${80 - this.properties.tagline.length
  }${strings.TaglineFieldDescriptionAfterCount}`,
})

The description field is the key here. I have a “before count” string and an “after count” string in my localized strings for the web part, and in between them I subtract the current length of the web part property (tagline in this example) from the maxLength value; these are concatenated into a single string value that is displayed under the text field. As the page author types, the property length is updated and the description automatically changes to provide instant feedback. This even works in non-reactive mode.