Edit

Share via

IPropertyPaneTextFieldProps interface

  • Reference
Package:
@microsoft/sp-property-pane

PropertyPaneTextField component props.

Properties

ariaLabel

Aria Label for text field, if any.
deferredValidationTime

Text field will start to validate after users stop typing for deferredValidationTime milliseconds.
description

The text field input description.
disabled

Whether the property pane text field is enabled or not.
errorMessage

If set, this will be displayed as an error message.
label

Label for the text field.
logName

Name used to log PropertyPaneTextField value changes for engagement tracking.
maxLength

Maximum number of characters that the PropertyPaneTextField can have.
multiline

Whether or not the text field is a multiline text field.
onGetErrorMessage

The method is used to get the validation error message and determine whether the input value is valid or not.
placeholder

placeholder text to be displayed in the text field.
resizable

Whether or not the multiline text field is resizable.
rows

Specifies the visible height of a text area(multiline text TextField), in lines.
underlined

Whether or not the text field is underlined.
validateOnFocusIn

Run validation when the PropertyPaneTextField is focused.
validateOnFocusOut

Run validation when the PropertyPaneTextField is out of focus or on blur.
value

Value to be displayed in the text field when the value of the targetProperty in the manifest's property bag is empty or contains null value.

Property Details

ariaLabel

Aria Label for text field, if any.

ariaLabel?: string;

Property Value

string

deferredValidationTime

Text field will start to validate after users stop typing for deferredValidationTime milliseconds.

deferredValidationTime?: number;

Property Value

number

Remarks

The default value is 200.

description

The text field input description.

description?: string;

Property Value

string

disabled

Whether the property pane text field is enabled or not.

disabled?: boolean;

Property Value

boolean

errorMessage

If set, this will be displayed as an error message.

errorMessage?: string;

Property Value

string

Remarks

When onGetErrorMessage returns empty string, if this property has a value set then this will be displayed as the error message.

So, make sure to set this only if you want to see an error message displayed for the text field.

label

Label for the text field.

label?: string;

Property Value

string

logName

Name used to log PropertyPaneTextField value changes for engagement tracking.

logName?: {
        moduleName: string;
        controlName: string;
    };

Property Value

{ moduleName: string; controlName: string; }

Remarks

The messages will be logged with a format such as <moduleName>.<controlName>.

For example, if {moduleName: 'ImageWebPart', controlName: 'OverlayText'} is specified, the engagement log might contain:

  1. The action type:

Add: change from initial/unset state to customized content. (first edit)

Clear: reset the content of caption element to initial/unset state.

Edit: any edition that changes the content apart from add and clear

  1. The text length after each edit

maxLength

Maximum number of characters that the PropertyPaneTextField can have.

maxLength?: number;

Property Value

number

Remarks

If the value is set to a negative number, an exception will be thrown.

multiline

Whether or not the text field is a multiline text field.

multiline?: boolean;

Property Value

boolean

Remarks

The default value is false.

onGetErrorMessage

The method is used to get the validation error message and determine whether the input value is valid or not.

onGetErrorMessage?: (value: string) => string | Promise<string>;

Property Value

(value: string) => string | Promise<string>

Remarks

When it returns string:

  • If valid, it returns empty string.

  • If invalid, it returns the error message string and an error message is displayed below the text field.

When it returns Promise<string>:

  • The resolved value is display as error message.

  • The rejected, the value is thrown away.

placeholder

placeholder text to be displayed in the text field.

placeholder?: string;

Property Value

string

resizable

Whether or not the multiline text field is resizable.

resizable?: boolean;

Property Value

boolean

Remarks

The default value is true.

rows

Specifies the visible height of a text area(multiline text TextField), in lines.

rows?: number;

Property Value

number

Remarks

This prop is used only when the multiline prop is set to true.

underlined

Whether or not the text field is underlined.

underlined?: boolean;

Property Value

boolean

Remarks

The default value is false.

validateOnFocusIn

Run validation when the PropertyPaneTextField is focused.

validateOnFocusIn?: boolean;

Property Value

boolean

Remarks

The default value is false.

validateOnFocusOut

Run validation when the PropertyPaneTextField is out of focus or on blur.

validateOnFocusOut?: boolean;

Property Value

boolean

Remarks

The default value is false.

value

Value to be displayed in the text field when the value of the targetProperty in the manifest's property bag is empty or contains null value.

value?: string;

Property Value

string