--- id: text-area title: 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. ## 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/actions/run-query) 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: |
Actions
|
Description
|
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 |
Validation Option
|
Description
|
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**: `{{(.test()) ? '' : 'Error message';}}` **Example**: `{{(/^\d{1,10}$/.test(components.textarea1.value)) ? '' : 'Error message';}}` ## Additional Actions |
Action
|
Description
|
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 |
Property
|
Description
|
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**. :::