Merge pull request #6924 from syncfusion-content/BLAZ-983104-textarea

Updated the UG Documentation for textarea

Author: UdhayaKumarDuraisamy

blazor/textarea/events.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor TextArea Component
 
-This topic explains the TextArea events that are raised during user interaction and component lifecycle. The following events are available: Created, Input, ValueChange, Focus, Blur, and Destroyed.
+This topic describes the TextArea events raised during user interaction and component lifecycle. The following events are available: Created, Input, ValueChange, Focus, Blur, and Destroyed.
 
 ## Created event
 
-The TextArea component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Created) event after the component is created and initialized. Use this event to perform one-time initialization or configuration logic.
+The TextArea triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Created) event after the component is created and initialized. Use this event for one-time initialization or configuration logic. This event does not provide event arguments.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -30,8 +30,7 @@ The TextArea component triggers the [Created](https://help.syncfusion.com/cr/bla
 
 ## Input event
 
-The TextArea component triggers the [Input](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Input) each time when the value of TextArea has changed. This event provides users with an opportunity to perform actions in response to real-time changes in the TextArea's content.
-The [TextAreaInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaInputEventArgs.html) passed as an event argument provides the details about the input event in the TextArea.
+The TextArea triggers the [Input](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Input) event on every keystroke as the user types, reflecting real-time changes to the content. The [TextAreaInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaInputEventArgs.html) argument provides details about the input event.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -48,7 +47,7 @@ The [TextAreaInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 
 ## ValueChange event
 
-The TextArea component triggers the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ValueChange) event when the content changes and the component loses focus (blur). Use this event to react to committed value changes. The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaValueChangeEventArgs.html) argument provides details about the value change.
+The TextArea triggers the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ValueChange) event when the content is committed (typically when the component loses focus). Use this event to react to finalized value changes rather than per-keystroke updates. The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaValueChangeEventArgs.html) argument provides details about the change.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -64,7 +63,7 @@ The TextArea component triggers the [ValueChange](https://help.syncfusion.com/cr
 
 ## Focus event
 
-The TextArea component triggers the [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Focus) event when the TextArea gains focus. Use this event to run logic when the user focuses the component. The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusInEventArgs.html) argument provides details about the focus event.
+The TextArea triggers the [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Focus) event when the component gains focus. Use this event to run logic when the user focuses the control. The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusInEventArgs.html) argument provides details about the focus-in event.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -81,7 +80,7 @@ The TextArea component triggers the [Focus](https://help.syncfusion.com/cr/blazo
 
 ## Blur event
 
-The TextArea component triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) event when the TextArea loses focus. Use this event to handle actions when focus moves away from the component. The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextAreaFocusOutEventArgs.html) argument provides details about the blur event.
+The TextArea triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) event when focus leaves the component. Use this event to handle actions when focus moves away. The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextAreaFocusOutEventArgs.html) argument provides details about the blur event.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -98,7 +97,7 @@ The TextArea component triggers the [Blur](https://help.syncfusion.com/cr/blazor
 
 ## Destroyed event
 
-The TextArea component triggers the [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Destroyed) event when the component is disposed. Use this lifecycle event to release resources or perform cleanup.
+The TextArea triggers the [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Destroyed) event when the component is disposed. Use this lifecycle event to release resources or perform cleanup. This event does not provide event arguments.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs

blazor/textarea/floating-label.md

@@ -9,15 +9,15 @@ documentation: ug
 
 # Floating Label in Blazor TextArea Component
 
-The floating label functionality in the TextArea component displays the placeholder as a floating label above the TextArea while the user interacts with it, improving readability and conserving space in forms. Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property to control this behavior. By default, the floating label is disabled (Never).
+The floating label displays the placeholder as a label above the TextArea while the user interacts with it, improving readability and saving space in forms. Control this behavior using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property. By default, the floating label is disabled (Never).
 
-The options below describe when the label floats and typical usage patterns:
+The following options describe when the label floats and typical usage patterns:
 
 | Type  | Description |
 | -- | -- |
-| Auto  | The label floats above the TextArea when it receives focus or input. If a value is present, the label remains floated after blur; if empty, it returns to its initial position. |
-| Always | The label always remains floating above the TextArea, regardless of user interaction or value. |
-| Never | The label never floats; it remains in its default position within the TextArea. |
+| Auto  | The label floats above the TextArea on focus or input. If a value is present, it remains floated after blur; if empty, it returns to its initial position. |
+| Always | The label remains floating above the TextArea at all times, regardless of interaction or value. |
+| Never | The label does not float and stays in its default placeholder position. |
 
 {% tabs %}
 {% highlight razor %}

blazor/textarea/form-support.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Form Support in Blazor TextArea Component
 
-The TextArea component integrates with HTML forms and Blazor’s EditForm to capture and submit multiline text efficiently. Typical scenarios include collecting detailed feedback, descriptions, and other long-form inputs as part of a form submission. See the TextArea forms and validation demo for a working example: TextArea forms and validation demo.
+The TextArea component integrates with HTML forms and Blazor’s EditForm to capture and submit multiline text efficiently. Common scenarios include collecting detailed feedback, descriptions, and other long-form inputs as part of a form submission. For a Working example, see the TextArea forms and validation demo for a working example: TextArea forms and validation demo.
 
 {% tabs %}
 {% highlight razor %}

blazor/textarea/getting-started-webapp.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TextArea in Blazor Web App
 
-This section explains how to include the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section explains how to include the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code.
 
 To get started quickly with the Blazor TextArea component, watch the following video:
 

blazor/textarea/getting-started.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TextArea Component
 
-This section explains how to add the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code.
+This guide explains how to add the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code.
 
 {% tabcontents %}
 

blazor/textarea/max-length.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Maximum Length in Blazor TextArea Component
 
-Use the [MaxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_MaxLength) property to enforce a maximum character limit in the TextArea. This property defines the highest number of characters that can be entered, helping guide input length and maintain data quality.
+Use the [MaxLength property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_MaxLength) to enforce a maximum character limit in the TextArea. This defines the highest number of characters the user can enter, helping control input length and maintain data quality.
 
 {% tabs %}
 {% highlight razor %}
@@ -19,6 +19,6 @@ Use the [MaxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inpu
 {% endhighlight %}
 {% endtabs %}
 
-When the specified limit is reached, the TextArea prevents further input from typing or pasting. Newline characters count toward the limit. For data integrity, also validate on the server or with model attributes (for example, MaxLength or StringLength). The Input event fires as the user types until the limit is reached, and ValueChange occurs on blur when the value is committed.
+When the limit is reached, the TextArea prevents further input from typing or pasting. Newline characters count toward the limit. For robust validation, also validate on the server or with model attributes (for example, MaxLength or StringLength). The Input event fires as the user types until the limit is reached, and ValueChange occurs on blur when the value is committed.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rthpDRsUCffyeOfE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with MaxLength](./images/blazor-textarea-maxlength.png)" %}

blazor/textarea/methods.md

@@ -15,7 +15,7 @@ This section describes the methods available for interacting with the TextArea c
 
 The [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusAsync) method programmatically moves focus to the TextArea element to enable user input. This asynchronous method should be awaited when used in an async context.
 
-By calling the `FocusAsync` method, focus is set to the TextArea so the user can immediately interact with it using the keyboard or other input methods. Ensure the component reference is available (after initial render) before invoking this method.
+By calling `FocusAsync`, the TextArea receives focus so the user can immediately interact with it using the keyboard or other input methods. Ensure the component reference is available (after the initial render) before invoking this method, for example by calling it in a Created/OnAfterRenderAsync handler or checking for null.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -36,8 +36,7 @@ By calling the `FocusAsync` method, focus is set to the TextArea so the user can
 
 ## FocusOutAsync method
 
-The [FocusOutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusOutAsync) method programmatically removes focus from the TextArea element, ending direct user interaction. This asynchronous method should be awaited when used in an async context.
-This method is useful when focus needs to move away after completing a task or to shift attention to another element in the application.
+The [FocusOutAsync method](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusOutAsync) programmatically removes focus (blurs) the TextArea element, ending direct user interaction. This asynchronous method returns a Task and should be awaited when used in an async context. To move focus to another control, explicitly set focus on the target element after blurring.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -58,8 +57,7 @@ This method is useful when focus needs to move away after completing a task or t
 
 ## GetPersistDataAsync method
 
-The [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_GetPersistDataAsync) method retrieves the component state that should be maintained for persistence. It returns a serialized representation (typically a JSON string) of the properties to persist.
-Use this method to capture configuration and state for storage and later restoration, such as saving user settings between sessions. As an asynchronous method, it should be awaited when called in an async context.
+The [GetPersistDataAsync method](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_GetPersistDataAsync) retrieves a serialized representation (typically a JSON string) of the component state to be maintained for persistence. Use this method when persistence is enabled (for example, with EnablePersistence="true") to capture configuration and state for storage and later restoration. As an asynchronous method, it returns a Task<string> and should be awaited in an async context.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs

blazor/textarea/resize.md

@@ -9,13 +9,13 @@ documentation: ug
 
 # Resize in Blazor TextArea Component
 
-The TextArea allows users to input and edit large amounts of text. Resizing can improve usability by accommodating varying content lengths. Configure resizing behavior using the [ResizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ResizeMode) property, which provides these options:
+The TextArea supports resizing so users can adjust the control to fit varying content lengths. Configure resizing behavior using the [ResizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ResizeMode) property:
 
 | Type  | Description |
 | -- | -- |
 | Vertical  | Enables vertical resizing to adjust the height of the TextArea. |
 | Horizontal | Enables horizontal resizing to adjust the width of the TextArea. |
-| Both | Enables both vertical and horizontal resizing for maximum flexibility. |
+| Both | Enables both vertical and horizontal resizing. |
 | None | Disables resizing and hides the resize handle to maintain a fixed layout. |
 
 N> In Razor, enums are typically referenced with the @ prefix (for example, @Resize.Both).
@@ -42,4 +42,4 @@ Customize the width of the TextArea using the [Width](https://help.syncfusion.co
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLTjRCACTsLJegK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Custom Width and Resize](./images/blazor-textarea-resize-width.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLTjRCACTsLJegK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Custom Width and Resize](./images/blazor-textarea-resize-width.png)" %}

blazor/textarea/rows-columns.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Rows and Columns in Blazor TextArea Component
 
-The TextArea size can be tailored for layout and readability using the component properties that map to native textarea behavior. The `rows` value controls the initial visible number of lines (vertical size), and the `columns` value represents the initial visible width in characters per line (approximate, as it depends on font and CSS). These settings affect only the initial visible area; content can still exceed the view and scrollbars may appear based on overflow settings.
+The TextArea size can be tailored for layout and readability using properties that map to native textarea behavior. The rows setting controls the initial visible number of lines (vertical size), and the columns setting represents the initial visible width in characters per line (approximate, depending on font and CSS). These settings affect only the initial visible area; content can still exceed the view, and scrollbars may appear based on overflow settings.
 
-* Customize the TextArea component by setting the number of rows with the [RowCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_RowCount) property and the number of columns with the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ColumnCount) property. These properties allow precise control over the dimensions of the TextArea, ensuring it fits seamlessly within the layout of the application.
+* Customize the TextArea by setting the number of rows with the [RowCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_RowCount) property and the number of columns with the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ColumnCount) property. These properties provide precise control over the TextArea’s initial dimensions so it fits the application layout.
 
 {% tabs %}
 {% highlight razor %}