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

id	title
text-area	Textarea

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

<div style={{ width:"100px"}}> Property	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
Default value	Used to set initial value in textarea on load. It is a pre-established value that can be retrieved from the Text area component if no modifications are made to it.	Enter some text as the value (example: "John Doe").
Placeholder	Provides a hint for the expected value. It disappears once the user interacts with the component.	Enter some instructional text as the value (example: "Type name here").

Component Specific Actions (CSA)

Following actions of the Textarea component can be controlled using Component-Specific Actions(CSA):

<div style={{ width:"100px"}}> Actions	<div style={{ width:"135px"}}> Description	<div style={{ width:"135px"}}> How To Access
setText	Sets the text on the text area component via a component-specific action within any event handler.	Employ a RunJS query to execute component-specific actions such as await components.textarea1.setText('this is a textarea').
clear	Clears the value from the text area component via a component-specific action within any event handler.	Employ a RunJS query to execute component-specific actions such as await components.textarea1.clear().

Exposed Variables

Variables	Description	How To Access
<div style={{ width:"100px"}}> value	This variable holds the value entered in the text area component.	Access the value dynamically using JS. For example, {{components.textarea1.value}}

General

Tooltip

A Tooltip is commonly used to provide additional information about an element. This information becomes visible when the user hovers the mouse pointer over the respective component.

In the input field under Tooltip, you can enter some text and the component will show the specified text as a tooltip when it is hovered over.

Devices

<div style={{ width:"100px"}}> Devices	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> 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

<div style={{ width:"100px"}}> Style	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
Visibility	Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed.	Use the toggle button OR click on fx to pass a boolean value or a logical expression that returns a boolean value i.e. either {{true}} or {{false}}.
Disable	Makes the component non-functional when set to true.	Use the toggle button OR click on fx to pass a boolean value or a logical expression that returns a boolean value i.e. either {{true}} or {{false}}.
Border radius	Adjusts the roundness of the component's corners.	Numeric value

General

Box Shadow

The Box Shadow property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.