ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/textarea.md

id	title
text-area	Textarea

The Textarea component allows users to enter text in an input field similar to the Text Input component. Textarea is generally preferred when we are expecting an input of multiple sentences. In this document, we'll go through all the configuration options for the Textarea component.

Properties

Property	Description	Expected Value
Label	Text to display as the label for the field.	String (for e.g., Enter Your Address).
Default value	Used to set initial value in text area on load.	String (for e.g., Nexus Building, Street XYZ, AB, 010101).
Placeholder	Provides a hint for the expected value. It disappears once the user interacts with the component.	String (for e.g., Enter Your Address Here).

Events

Event	Description
On change	Triggers whenever the input value changes.
On enter pressed	Triggers whenever the enter key is pressed.
On focus	Triggers whenever the user clicks inside the input field.
On blur	Triggers whenever the user clicks outside the input field.

:::info Check Action Reference docs to get the detailed information about all the Actions. :::

Component Specific Actions (CSA)

Following actions of component can be controlled using the Component Specific Actions(CSA), which can be triggered by an event or by the given RunJS query:

<div style={{ width:"100px"}}> Actions	<div style={{ width:"200px"}}> Description	<div style={{ width:"135px"}}> How To Access
setText	Sets the text for the component.	components.textarea1.setText('this is a textarea')
clear	Clears the value from the text area component.	components.textarea1.clear().
setVisibility( )	Sets the visibility state of the text area.	components.textarea1.setVisibility()
setLoading( )	Sets the loading state of the text area.	components.textarea1.setLoading()
setDisable( )	Disables the text area.	components.textarea1.setDisable()
setFocus( )	Sets the focus of the cursor on the text area.	components.textarea1.setLoading()
setBlur( )	Removes the focus of the cursor from the text area.	components.textarea1.setBlur()

Exposed Variables

Following exposed variables can be dynamically accessed using the given JS query:

Variables	Description	How To Access
value	This variable holds the value entered in the text area component.	{{components.textarea1.value}}
label	Holds the value of the component's label.	{{components.textarea1.label}}
isValid	Indicates if the input meets validation criteria.	{{components.textarea1.isValid}})
isMandatory	Indicates if the field is Mandatory.	{{components.textarea1.isMandatory}}
isLoading	Indicates if the component is loading.	{{components.textarea1.isLoading}}
isVisible	Indicates if the component is visible.	{{components.textarea1.isVisible}}
isDisabled	Indicates if the component is disabled.	{{components.textarea1.isDisabled}}

Validation

<div style={{ width:"100px"}}> Validation Option	<div style={{ width:"200px"}}> Description	<div style={{width: "200px"}}> Expected Value
Make this field mandatory	Displays a 'Field cannot be empty' message if no value is entered.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Regex	Regular Expression to validate the input.	Regular Expression Pattern (e.g., ^\d{3}-\d{2}-\d{4}$).
Min length	Sets the minimum number of characters allowed.	Integer (e.g., 100 for a minimum of 100 characters).
Max length	Sets the maximum number of characters allowed.	Integer (e.g., 500 for a maximum of 500 characters).
Custom validation	Specifies a validation error message for specific conditions.	Logical Expression (e.g., {{components.textarea1.value<5&&"Value needs to be more than 5"}}).

To add regex inside Custom Validation, you can use the below format:

Format: {{(<regexPattern>.test(<value>)) ? '' : 'Error message';}}

Example: {{(/^\d{1,10}$/.test(components.textarea1.value)) ? '' : 'Error message';}}

Additional Actions

<div style={{ width:"100px"}}> Action	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Dynamic height	Automatically adjusts the component's height based on its content.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Loading state	Enables a loading spinner, often used with isLoading to indicate progress.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Visibility	Controls component visibility.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Disable	Enables or disables the component.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Tooltip	Provides additional information on hover. Set a string value for display.	String (e.g., Enter your name here. ).

Devices

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Expected Value
Show on desktop	Makes the component visible in desktop view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile	Makes the component visible in mobile view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

Label

Property	Description
Label Color	Sets the color of the label text.
Alignment	Determines the label's position, choose between top/side and left/right alignment.
Width	Specifies the percentage of the component’s width that the label should occupy.

Color

Property	Description
Background	Sets the background color of the component.
Border	Defines the color of the component’s border.
Accent	Specifies the accent color used for highlights or focus indicators.
Text	Sets the text color inside the component.
Error text	Color applied to error messages.

Input Field

Property	Description
Icon	Adds an icon to the component, usually for visual cues or actions.
Icon Color	Sets the color of the icon.
Border radius	Controls the roundness of the component's input field.
Box shadow	Applies shadow styling to the input field.
Padding	Sets the internal spacing between the content and the input field edges.

:::info Any property having fx button next to its field can be programmatically configured. :::