Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions blazor/textarea/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
10 changes: 5 additions & 5 deletions blazor/textarea/floating-label.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion blazor/textarea/form-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion blazor/textarea/getting-started-webapp.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion blazor/textarea/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand Down
4 changes: 2 additions & 2 deletions blazor/textarea/max-length.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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)" %}
8 changes: 3 additions & 5 deletions blazor/textarea/methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions blazor/textarea/resize.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand All @@ -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)" %}
4 changes: 2 additions & 2 deletions blazor/textarea/rows-columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
Loading