# Text Area

## Overview

The Avonni Text Area component offers a multi-line input field for users to enter extended text, such as comments, descriptions, or free-form data. It's essential for capturing detailed inputs in Salesforce Dynamic Components.

### Key features

* **Multi-Line Support:** Automatic word wrapping for longer entries.
* **Resizable:** Users can often drag to adjust the size.
* **Length Controls:** Set min/max character limits.
* **Character Count:** Optional live display for feedback.
* **Data Binding:** Bind to Text Variables for storage and reuse.
* **Input Modes:** Plain text or rich formatting.
* **Placeholder:** Hint text for guidance.

### Use Cases

* Capture case descriptions or feedback in support apps.
* Enter product notes or project details.
* Collect user comments in surveys or portals.
* Input multi-line addresses or instructions.
* Create rich text entries for knowledge articles.

## Configuration

Select the Text Area on the canvas to access properties in the right-hand Properties Panel.

### **Basic Properties**

These manage identification, labeling, and core data.

| Property         | Type            | Description                                                               | Example                      |
| ---------------- | --------------- | ------------------------------------------------------------------------- | ---------------------------- |
| API Name         | Text            | Unique identifier for the instance.                                       | CaseDescriptionTextArea      |
| Label            | Text            | Displayed label.                                                          | "Description:"               |
| Field Level Help | Text (Optional) | Additional guidance next to the label.                                    | "Provide details here."      |
| Value            | Text Binding    | Holds user input; bind to Text Variable for storage, defaults, and reuse. | Bind to `{!caseDescription}` |
| Placeholder      | Text (Optional) | Hint text shown before input.                                             | "Enter details..."           |

### **Text Input and Formatting**

These control text style and constraints.

| Property             | Type/Condition     | Description                                                          | Options/Examples             |
| -------------------- | ------------------ | -------------------------------------------------------------------- | ---------------------------- |
| Font                 | Text               | Font family for the text.                                            | "Arial", "Times New Roman".  |
| Font Size            | Number             | Size in points.                                                      | 14                           |
| Max Length           | Number (Optional)  | Maximum characters allowed.                                          | 1000                         |
| Min Length           | Number (Optional)  | Minimum characters required.                                         | 50                           |
| Show Character Count | Boolean (Checkbox) | Displays live count (e.g., "25/200").                                | Recommended with Max Length. |
| Mode                 | Select             | Editing style: plain (basic text) or rich (with formatting toolbar). | plain, rich.                 |

For rich mode, users access a toolbar with options like:

* **Header:** Apply styles (e.g., H1, H2).
* **Color:** Text foreground color.
* **Highlight Color:** Background color.
* **Code:** Monospaced snippet formatting.
* **Font:** Change family.
* And more (e.g., bold, italics, lists).

### **Behavior Properties**

These handle interactivity and state.

| Property  | Type    | Description                                |
| --------- | ------- | ------------------------------------------ |
| Required  | Boolean | Mandates input; integrate with validation. |
| Disabled  | Boolean | Prevents all interactions.                 |
| Read Only | Boolean | Allows viewing/copying but no edits.       |

***

## Key Considerations

* **Length Limits:** Combine Max/Min Length with Show Character Count for user-friendly enforcement.
* **Mode Selection:** Use 'plain' for simple text; 'rich' adds overhead but enhances expressiveness—performance test.
* **Accessibility:** Ensure labels are descriptive; rich mode supports screen readers for formatted content.

***

## **Troubleshooting Common Issues**

* **Character Count Missing:** Enable Show Character Count and set Max Length.
* **Formatting Not Appearing:** Confirm Mode is rich; browser extensions may interfere—test in incognito.
* **Long Text Truncation:** Increase Max Length or use scrolling for very large inputs.

***

## Summary

The Avonni Text Area component efficiently captures multi-line text, with options for limits, formatting, and binding. It's versatile for forms and data entry in Salesforce UIs. For related topics, see Avonni Input Components or Variables Guide.