Text Area
The Text Area component enables the user to add a larger amount of text information to a Squirrel project than the standard Text Input component. This could be a review, a comment, or a description.
Select Text Area from the text category of the component library. Move the mouse cursor over the canvas and click to add a Text Area to your project:
Text Area Properties
The Text Area properties consist of DATA INSERTION, STYLING, INTERACTIVITY, and DYNAMIC VISIBILITY drawers. This guide will not describe the dynamic visibility properties as these are generic to each visible component, a separate guide and tutorial on dynamic visibility can be found here.
DATA INSERTION
Destination – Bind this property to a cell in the spreadsheet. Any text input by the user will then be stored in that cell.
INPUT OPTIONS
Treat Input As Text – Checking this option ensures that all input, including numeric data, is inserted in the spreadsheet as a text string.
Protect password – Checking this option will ensure that data entered into this input field will be masked/obscured.
Update value realtime - Check this option to have the value input into the spreadsheet as it is typed, rather than upon hitting return or clicking out of the input.
Characters allowed – Restrict the characters that the user can input. Either bind to a cell in the spreadsheet that contains a set of characters to be used or type the characters into the property field. Adding 1234567890 to this property will restrict the user to only being able to type numbers into the input field; typing an uppercase alphabet will restrict the user to only entering uppercase letters and so on.
Set max number of characters – Check this property to restrict the number of characters that a user can input.
STYLING
These properties make changes to the base styling of the Text Area component.
Number of rows - An input to set the max number of rows of text that can be entered into the component.
INPUT TEXT
Placeholder text – This is the text that will be displayed in the Text Area component before the user inputs a different value. The default is Enter text.
Font – Choose a font style from the dropdown list
Text Color – The input text will be shown in the color that matches the value entered in the property field. This can be set in 3 ways:
Clicking the colored rectangle and using the color picker
Typing in a color value
Binding to a color value in a spreadsheet cell
Opacity – This determines the transparency of the input text. This property can be set in 3 different ways:
Using the spinner buttons
Typing in a value
Binding to value in a spreadsheet cell
Padding – This property defines the space between the input text border and the input text. It can be set in 3 ways:
Using the spinner buttons
Typing in a value
Binding to value in a spreadsheet cell
Individual Padding - selected this property to apply different amounts of padding to each of the component's edges. Each of these individual inputs can be manually edited or bound to the spreadsheet.
BACKGROUND
Fill – When checked, the background of the input text will be filled with a color that matches the value entered in the property field. This can be set in 3 ways:
Clicking the colored rectangle next to the Fill checkbox and using the color picker
Typing in a color value
Binding to a color value in a spreadsheet cell
Opacity – This determines the transparency of the background of the input text. This is only available when the Fill checkbox is checked. Opacity can be set in 3 different ways:
Using the spinner buttons
Typing in a value
Binding to value in a spreadsheet cell
Border – This property is checked by default. Set the border color and opacity properties as desired. Uncheck to remove the border.
Weight – This property determines the line thickness of the Dropdown component border in pixels.
Individual Weight - selected this property to apply different widths to each of the component's borders. Each of these individual inputs can be manually edited or bound to the spreadsheet.
Line style – Select a borderline style. The options are solid and dashed:
Corners – This property determines the corner radius of the text label border. Use the slider to amend this property or type a numerical value into the property field.
Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.
INTERACTIVITY
DYNAMIC DISABLED STATE
It is possible to disable the dropdown component if you want to limit the user’s access to the dropdown list.
The DYNAMIC DISABLED STATE property utilizes Conditional Logic. For more information on Conditional Logic and its uses, see this article.
Last updated
