mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
6fe677ecd7
* [docs]: Currency Input Component * grammatical fixes * wip phone input component * Phone Input * [docs]: Email Input Component * [docs]: Update multiselect csa * [docs]: Date Picker v2 Coomponent * Minor Update * [docs]: Date Range Picker Component * [docs]: Time Picker Component * [docs]: Date Time Picker Component * Update datetime-picker-v2.md * Update datetime-picker-v2.md * [docs]: Text Area Component * action reference sequence * add shortcuts * add new actions * update sidebar * [docs]: Cutom Themes * component level permission * [docs]: Component & Query Level Permissions * [docs]: Pages and Navigation * generate form component docs * correct redirect * properties docs * CSAs * custom schema * delete old form doc * Icon Component * radio button * [docs]: Modules * Image Component * update: add use module doc * fix: overview * improve overview * [docs]: Step Component * [docs]: Modal Component * remove add widget section from old modal docs * [docs]: Container Component * Update container.md * [docs]: Dynamic Height of Various Components * [docs]: Inspector UI Updates * [docs]: Table Component * [docs]: Textarea Component * make minor updates * [docs]: Tab Component * [docs]: Range Slider * [docs]: File Picker Component * [docs]: Code Editor Component * [docs]: Multiselect Component * dropdown updates * fix: module behavior on app import-export * minor changes * resolve build errors * [docs]: Custom Logs * fix sidebar * sidebar update * fix sidebar * add sidebar * fix: content for import export module * fix * fix: arrow screenshot * sanity check for legacy component and URLs * form url update * Update settings.json * pages and navigation doc update --------- Co-authored-by: PriteshKiri <pritesh.d.kiri@gmail.com> Co-authored-by: Karan Rathod <karan.altcampus@gmail.com>
89 lines
4.5 KiB
Markdown
89 lines
4.5 KiB
Markdown
---
|
|
id: text-area
|
|
title: Textarea
|
|
---
|
|
|
|
# Textarea
|
|
|
|
The **Textarea** component allows users to enter text in an input field similar to the [Text Input](/docs/widgets/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.
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Properties
|
|
|
|
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
|
|:-------------|:------------------------------------------------------------|:------------|
|
|
| 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"). |
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Component Specific Actions (CSA)
|
|
|
|
Following actions of the **Textarea** component can be controlled using Component-Specific Actions(CSA):
|
|
|
|
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
|
| :----------- | :----------- |:---------|
|
|
| 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()`. |
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Exposed Variables
|
|
|
|
| Variables | Description | How To Access |
|
|
|:---------|:-----------|:-------------|
|
|
| <div style={{ width:"100px"}}> value </div> | This variable holds the value entered in the text area component. | Access the value dynamically using JS. For example, `{{components.textarea1.value}}` |
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## 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.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Devices
|
|
|
|
| <div style={{ width:"100px"}}> Devices </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
|
| :----------- | :----------- | :------------ |
|
|
| 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. |
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
---
|
|
|
|
## Styles
|
|
|
|
| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
|
| :------------- | :-------------- | :-------------- |
|
|
| 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 |
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## 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.
|
|
|
|
</div>
|