Text area

The Text area component is an input field that allows users to enter and manipulate multiple lines of text. It can also be used to display prepopulated information to the user.

Example

You can use the Text area component to allow the user to give extensive feedback in a form.

Note: The Text area component follows the WCAG 2.0 AA accessibility guidelines.

Properties

The following Text area component properties are available:

Main

Property	Description	Required
Component ID	Enter a unique name for the component. See Templating in components for more details.	Yes
Label	Enter the text you want to display above the component.	Yes
Placeholder	Enter the text you want to display in the field before any input.	No
Description	Add a description for the component. This is displayed under the Label.	No
Hint	Enter a text under the component to give the user any additional information. Validation messages have priority and will hide the hint temporarily.	No
Default value	Enter a value to prepopulate the component.	No

Note: See Templating drop-down for more details on rendering dynamic content using Liquid.

Styles

Property	Description	Required
Size	Select the size from the drop-down menu.	No
Rows	Enter the maximum number of rows to be displayed before a scroll bar appears.	No
Max length	Enter the maximum characters allowed.	No
Show count	Select the checkbox to show a character count bellow the box.	No

Validation

Property	Description		Required
Optional field	Turn on to make the component optional. By default, the component is required.		No
Add rule	Add rules in Liquid to specify when the component is required. If no rules are set, the component will be required in all instances. See Add rules to trigger properties for more details.		No
Message	Enter a message to be displayed if the user does not fill in the input. A default message is otherwise shown.		No
Additional validations	Select any or all of the following checkboxes to add validations.		No
	Error	Select the checkbox to add a red error style validation to the component.	No
	Add rule	Add rules in Liquid to specify when the error validation is shown.	Yes
	Error message	Enter a message to be displayed if the user fills in the input incorrectly.	Yes
	Warning	Select the checkbox to add an orange warning style validation to the component.	No
	Add rule	Add rules in Liquid to specify when the warning validation is shown.	Yes
	Warning message	Enter a message to give the user advice on how to better fill in the input.	Yes
	Positive	Select the checkbox to add a green positive style validation to the component.	No
	Add rule	Add rules in Liquid to specify when the positive validation is shown.	Yes
	Positive message	Enter a message to tell the user that the input has been correctly filled in.	Yes

Interactions

Property	Description	Required
Hidden	Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel.	No
Add rule	You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances.	No
Disabled	Select the checkbox to disable the component in the end-user app.	No
Add rule	You can set rules to disable the component using Liquid. If no rules are set, the component will be disabled in all instances.	No
Read only	Select the checkbox to set the component to read-only.	No
Add rule	You can set rules to prevent the user from editing the component using Liquid. If no rules are set, the component will be read-only in all instances.	No

Note: See Add rules to trigger properties for more information on setting rules for these properties.

Accessibility

Property	Description	Required
Aria label	Enter a text that allows assistive technology to attach a label to the component.	No
Title	Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app.	No