ResizableTextArea control

A component for user input.

Note

Full documentation and source code found in the GitHub code components repository.

Description

Text areas give people a way to enter and edit text. They're used in forms, modal dialogs, tables, and other surfaces where text input is required.

This component allows the user to resize the text area for convenience.

Note

Component source code and more information in the GitHub code components repository.

Properties

Key properties

Property	Description
Text	The text value set in the control. This is the default bound property when used in a model-driven app.
Default	The default value that the control will have when the control is reset, or the default value is changed. This allows the control to work in a similar way to controls inside canvas app forms.
MaxLength	The maximum number of characters that can be entered
HintText	The text to display when there is no text value set
EmptyPlaceholderText	The text to display when there is no value, and the control does not have focus. This provides a similar style when the model-driven text control that displays --- when there is no value populated.
DefaultHeight	The height to set the text area to initially.If this is not set in a canvas app/custom page, the size will default to the code component height. For model-driven apps, this is required since the form does not provide an initial height.
DefaultWidth	The width to set the text area to initially. If this is not set in a canvas app/custom page, the size will default to the code component height. For model-driven apps, this is not required, since the default width will be the width of the form column.
MinHeight	The minimum height that the textarea can be resized to. Set to zero for no limit.
MaxHeight	The maximum height that the textarea can be resized to. Set to zero for no limit.
Min Width	The minimum width that the textarea can be resized to. Set to zero for no limit.
MaxWidth	The maximum width that the textarea can be resized to. Set to zero for no limit.
AllowResize	Defines which direction the textarea can be resized in. None, Both, Vertical or Horizontal.
EnableSpellCheck	Defines if the textarea should be spell checked by the browser or not.

Output properties

Property	Description
Resized Height** (output) - The user adjusted height | Resized Width** (output) - The user adjusted width

Style Properties

Property	Description
PaddingLeft	The padding to add inside the textarea
PaddingRight	The padding to add inside the textarea
PaddingTop	The padding to add inside the textarea
PaddingBottom	The padding to add inside the textarea
Left Padding Adjustment	Inside a model driven app, even when the label is hidden there is padding on the left of the code component to hold icons (e.g. lock icon). To correct for this, the width must be reduced by setting the Left Padding Adjustment to 21. When there is also a label, the Left Padding Adjustment must be set to the width of the label.
RenderBorderStyle	This can be either Normal or Centered. When set to Normal, the border width will increase inside the text area box, however using Centered will center the border around the edge of the text area box. Use Centered to be compatible with the Power Apps Classic controls, and normal for model-driven and Fluent UI controls.
Accessibility Label	The aria label

Not all combinations of style/state are implemented by every component. See the State Dependent Style Properties in the GitHub component documentation.

Event Properties

Property	Description
Input Event	Set the Input Event property to a string starting in SetFocus to set focus on the control. You must include a random suffix for the event to trigger.

Other properties are the same as the standard text input control.

Behavior

Supports SetFocus as an InputEvent.

Limitations

This code component can only be used in canvas apps, custom pages, and model-driven apps.

See more limitation notes in the design challenges section of the GitHub documentation.