Add informative text to PropertyPaneConfiguration

Question

I'd like to write some lines of text to clarify the use specific properties, like a hint below the field or as a separate text block, or even as an (i) icon next to the field

Is this at all possible?

for example

Field name

[_______]

some additional note

or

Field name 1

[_______]

Field name 2

[_______]

About field 1 and 2: here's how to use them

Answer 1

You can use PnP SPFx property pane controls in your solution.

They provide callout value for standard property pane controls like button, text, dropdown etc.

Example:

To install them, you can do that as below:

npm install @pnp/spfx-property-controls --save --save-exact

After that in your project you can use it as below:

1) add the necessary import statement:

import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
import { PropertyFieldLabelWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLabelWithCallout';

2) Add custom property control:

PropertyFieldLabelWithCallout('fakeProp', {
  calloutTrigger: CalloutTriggers.Click,
  key: 'LabelWithCalloutFieldId',
  calloutContent: 'Use dropdowns below to select list and list\'s field to work with',
  calloutWidth: 200,
  text: 'Select List and Field'
})

Reference - PnP SPFx property pane controls

These callouts are there for standard controls mentioned below:

Label with callout - Property Pane label control with callout

Checkbox with callout - Property Pane checkbox control with callout

Choice group with callout - Property Pane choice group control with callout

Toggle with callout - Property pane toggle control with callout

Answer 2

Yes, you can use PropertyPaneLabel for that.

Something Like:

{
    groupName: "Custom group",
    groupFields: [
        PropertyPaneTextField('textboxField', {
            label: "Enter a custom value"
        }),
        PropertyPaneLabel('labelField', {
            text: "This is a custom text in PropertyPaneLabel"
        })
    ]
}

Output:

Check below article for more information:

SharePoint client-side web part configurable properties in Property Pane using spfx