From d14e8c3ab614adf77efc97411d3a364c5ea31279 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Tue, 14 Oct 2025 16:14:15 +0530 Subject: [PATCH] 983104: Updated the UG Documentation for textarea --- blazor/textarea/events.md | 15 ++++++------- blazor/textarea/floating-label.md | 10 ++++----- blazor/textarea/form-support.md | 2 +- blazor/textarea/getting-started-webapp.md | 2 +- blazor/textarea/getting-started.md | 2 +- blazor/textarea/max-length.md | 4 ++-- blazor/textarea/methods.md | 8 +++---- blazor/textarea/resize.md | 6 +++--- blazor/textarea/rows-columns.md | 4 ++-- blazor/textarea/styles-appearance.md | 26 ++++++++++------------- 10 files changed, 36 insertions(+), 43 deletions(-) diff --git a/blazor/textarea/events.md b/blazor/textarea/events.md index 7a14f5f0c0..6aa59a874f 100644 --- a/blazor/textarea/events.md +++ b/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 diff --git a/blazor/textarea/floating-label.md b/blazor/textarea/floating-label.md index b719b3f5e6..7bb72b1f26 100644 --- a/blazor/textarea/floating-label.md +++ b/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 %} diff --git a/blazor/textarea/form-support.md b/blazor/textarea/form-support.md index f5c20b68da..0e8e3874ce 100644 --- a/blazor/textarea/form-support.md +++ b/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 %} diff --git a/blazor/textarea/getting-started-webapp.md b/blazor/textarea/getting-started-webapp.md index ebe5fc54fd..a8087f9815 100644 --- a/blazor/textarea/getting-started-webapp.md +++ b/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: diff --git a/blazor/textarea/getting-started.md b/blazor/textarea/getting-started.md index dce202422b..924340f8f2 100644 --- a/blazor/textarea/getting-started.md +++ b/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 %} diff --git a/blazor/textarea/max-length.md b/blazor/textarea/max-length.md index 306a55cad0..6903d0601e 100644 --- a/blazor/textarea/max-length.md +++ b/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)" %} \ No newline at end of file diff --git a/blazor/textarea/methods.md b/blazor/textarea/methods.md index 0258749746..1f4ac249d5 100644 --- a/blazor/textarea/methods.md +++ b/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 and should be awaited in an async context. ```cshtml @using Syncfusion.Blazor.Inputs diff --git a/blazor/textarea/resize.md b/blazor/textarea/resize.md index cb3efb3896..8b08bb6d51 100644 --- a/blazor/textarea/resize.md +++ b/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)" %} \ No newline at end of file diff --git a/blazor/textarea/rows-columns.md b/blazor/textarea/rows-columns.md index d6f0f0bb5c..35d2e0b000 100644 --- a/blazor/textarea/rows-columns.md +++ b/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 %} diff --git a/blazor/textarea/styles-appearance.md b/blazor/textarea/styles-appearance.md index 6ee7b9516b..0a7c66abb4 100644 --- a/blazor/textarea/styles-appearance.md +++ b/blazor/textarea/styles-appearance.md @@ -13,8 +13,8 @@ The size of the TextArea can be adjusted by applying the following classes: | Property | Description | | -- | -- | -| Small | Add the `e-small` class to the input element or its container to render a smaller-sized TextArea. | -| Bigger | Add the `e-bigger` class to the input element or its container to render a larger-sized TextArea. | +| Small | Add the `e-small` class to render a smaller TextArea. | +| Bigger | Add the `e-bigger` class to render a larger TextArea. | Applying these classes helps align the TextArea with the overall density and visual scale of the application’s design. @@ -88,13 +88,11 @@ By adding these classes, users can choose between a filled or outline appearance {% endhighlight %} {% endtabs %} ->Note: Filled and Outline appearances are available only with the Material and Material3 themes. +>Note: Filled and outline appearances are available only with the Material and Material3 themes. ## Custom styling with CssClass property -The `CssClass` property provides a way to apply custom CSS classes to the TextArea container, enabling customization of color, padding, margins, borders, and other styles to meet design requirements. - -By applying custom classes, the component’s appearance can be tailored while preserving built-in theme behavior. +Use `CssClass` to apply custom CSS classes to the TextArea wrapper. This approach scopes styles (color, padding, margins, borders, etc.) to specific instances while preserving built-in theme behavior. {% tabs %} {% highlight razor %} @@ -106,7 +104,7 @@ By applying custom classes, the component’s appearance can be tailored while p ## Setting the disabled state -Disable the TextArea by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Disabled) property. When set to `true`, the TextArea becomes disabled, preventing user interaction. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent). +Disable the TextArea using the [Disabled property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Disabled). When set to `true`, the TextArea is non-interactive. For an example, see the TextArea API demo. {% tabs %} {% highlight razor %} @@ -116,10 +114,9 @@ Disable the TextArea by using the [Disabled](https://help.syncfusion.com/cr/blaz {% endhighlight %} {% endtabs %} - ## Set the ReadOnly property -To make the TextArea read-only , you can use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Readonly) property. When set to `true`, it prevents users from editing the content of the TextArea. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent). +Make the TextArea read-only using the [ReadOnly property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Readonly). When set to `true`, users cannot edit the content while it remains focusable. For an example, see the TextArea API demo. {% tabs %} {% highlight razor %} @@ -129,7 +126,6 @@ To make the TextArea read-only , you can use the [ReadOnly](https://help.syncfus {% endhighlight %} {% endtabs %} - ## Set the rounded corner Render the TextArea with rounded corners by adding the `e-corner` class to the input’s parent element. This style applies to the boxed input wrapper. @@ -155,7 +151,7 @@ Render the TextArea with rounded corners by adding the `e-corner` class to the i ## Static Clear Button -To display a static clear button in the TextArea component, you can add the `e-static-clear` class to the `CssClass` property. This class ensures that the clear button remains visible at all times, providing users with the ability to easily clear the TextArea content without needing to focus on the control. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent). +Display a static clear button by adding the `e-static-clear` class and enabling `ShowClearButton`. The clear button remains visible at all times for quick content clearing. See the TextArea API demo for a working sample. {% tabs %} {% highlight razor %} @@ -167,7 +163,7 @@ To display a static clear button in the TextArea component, you can add the `e-s ## Customize the TextArea background color and text color -Customize background color, text color, and border color by overriding the default wrapper styles. Target the appropriate wrapper classes to ensure consistent appearance across themes. +Override default wrapper styles to customize background color, text color, and border color. Target the appropriate wrapper classes to ensure a consistent appearance across themes. When changing colors, maintain sufficient contrast and preserve visible focus indicators for accessibility. {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -219,7 +215,7 @@ Customize background color, text color, and border color by overriding the defau ## Change the floating label color -You can change the floating label color of the TextArea for both `success` and `warning` validation states by applying the following CSS styles. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/default-functionalities?theme=fluent). +Customize floating label color for `success` and `warning` validation states by applying the following CSS. Avoid relying on color alone for state indication; include text or icons where appropriate. ```css @@ -294,7 +290,7 @@ You can change the floating label color of the TextArea for both `success` and ` ## Adding mandatory asterisk to placeholder -Add a mandatory asterisk (*) to the floating label using CSS to append the symbol after the label text. +Add a mandatory asterisk (*) to the floating label using CSS to append a symbol after the label text. ```css @@ -346,4 +342,4 @@ Add a mandatory asterisk (*) to the floating label using CSS to append the symbo {% endhighlight %} {% endtabs %} -![Blazor TextArea with Sizing](./images/blazor-textarea-asterisk.png) \ No newline at end of file +![Blazor TextArea with asterisk appended to the floating label](./images/blazor-textarea-asterisk.png) \ No newline at end of file