Class SfTextArea
The TextArea is an textarea element that allows to get input from the user. It allows the user to edit or display the text value.
Inheritance
Inherited Members
Namespace: Syncfusion.Blazor.Inputs
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfTextArea : SfInputTextBase<string>, IComponent, IHandleEvent, IHandleAfterRender, IDisposableRemarks
The SfTextArea component provides a rich multiline text input experience with support for floating labels, clear buttons, validation, resizing options, and various input modes. It extends the base input functionality to handle multiline text scenarios effectively.
Examples
A basic TextArea component.
<SfTextArea @bind-Value="@textValue"
Placeholder="Enter your message..."
RowCount="4"
ColumnCount="50"
MaxLength="500"
ResizeMode="Resize.Both">
</SfTextArea>
@code {
private string textValue = string.Empty;
}Constructors
SfTextArea()
Declaration
public SfTextArea()Properties
BaseFloatLabelType
Gets or sets the floating label behavior of the input component that determines how the placeholder text is displayed.
Declaration
protected override FloatLabelType BaseFloatLabelType { get; set; }Property Value
| Type | Description |
|---|---|
| FloatLabelType | A FloatLabelType enumeration value that specifies the floating label behavior. The default value depends on the specific input component implementation. |
Overrides
Remarks
The floating label behavior controls how the placeholder text is presented to the user:
- NeverThe label never floats and remains as a standard placeholder text within the input field.
- AlwaysThe label is always positioned above the input field, providing a consistent visual layout.
- AutoThe label dynamically floats above the input field when the component receives focus or contains a value, creating an animated transition effect.
BaseHtmlAttributes
Gets or sets additional HTML attributes to be applied to the input component's container element.
Declaration
protected override Dictionary<string, object>? BaseHtmlAttributes { get; set; }Property Value
| Type | Description |
|---|---|
| Dictionary<string, object> | A Dictionary<TKey, TValue> containing key-value pairs of HTML attributes, or |
Overrides
Remarks
Use this property to add custom HTML attributes such as data attributes, accessibility attributes, or styling classes to the component's container. Common attributes like 'class', 'style', and 'title' are handled specially and may be applied to different elements within the component structure.
BaseInputAttributes
Gets or sets additional HTML attributes to be applied specifically to the input element itself.
Declaration
protected override Dictionary<string, object> BaseInputAttributes { get; set; }Property Value
| Type | Description |
|---|---|
| Dictionary<string, object> | A Dictionary<TKey, TValue> containing key-value pairs of HTML attributes. The default value is an empty dictionary. |
Overrides
Remarks
This property allows direct customization of the underlying input element with additional HTML attributes. Attributes set here will be applied directly to the input tag, enabling fine-grained control over input behavior and appearance.
BasePlaceholder
Gets or sets the placeholder text displayed in the input when no value is present.
Declaration
protected override string? BasePlaceholder { get; set; }Property Value
| Type | Description |
|---|---|
| string | A string representing the placeholder text, or |
Overrides
Remarks
The placeholder provides a hint to users about the expected input format or content. This text is automatically hidden when the input receives focus or contains a value.
BaseReadonly
Gets or sets a value indicating whether the input component is in read-only mode.
Declaration
protected override bool BaseReadonly { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
|
Overrides
Remarks
When in read-only mode, users can view and select the content but cannot modify it. The input will still receive focus and trigger events, but user input will be prevented.
BaseShowClearButton
Gets or sets a value indicating whether a clear button should be displayed to allow users to quickly clear the input value.
Declaration
protected override bool BaseShowClearButton { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
|
Overrides
Remarks
When enabled, a clear button appears within the input field when it contains a value, allowing users to quickly clear the content. The button is automatically hidden when the input is empty, disabled, or read-only.
BaseTabIndex
Gets or sets the tab index of the input component for keyboard navigation.
Declaration
protected override int BaseTabIndex { get; set; }Property Value
| Type | Description |
|---|---|
| int | An integer representing the tab order. Positive values indicate the explicit tab order, 0 means the element is focusable in document order, and negative values remove the element from tab navigation. |
Overrides
Remarks
This property controls the order in which the component receives focus during keyboard navigation. When the component is disabled, the tab index is automatically set to -1 to remove it from the tab sequence.
Blur
Gets or sets the event callback that will be invoked when the SfTextArea loses focus.
Declaration
[Parameter]
public EventCallback<TextAreaFocusOutEventArgs> Blur { get; set; }Property Value
| Type | Description |
|---|---|
| EventCallback<TextAreaFocusOutEventArgs> | An EventCallback<TValue> that is invoked when the SfTextArea loses focus. The callback receives a TextAreaFocusOutEventArgs containing blur-related information. |
Remarks
The Blur event is triggered when the user clicks outside the SfTextArea, tabs away from it, or programmatically removes focus from the component. This event is commonly used for validation purposes, saving draft content, hiding input-specific UI elements, or updating the application state when the user finishes interacting with the textarea. The event provides information about the blur operation through the TextAreaFocusOutEventArgs parameter.
ColumnCount
Gets or sets the number of columns for the SfTextArea component.
Declaration
[Parameter]
public int ColumnCount { get; set; }Property Value
| Type | Description |
|---|---|
| int | An integer representing the number of columns. The default value is 20. |
Remarks
The ColumnCount property specifies the visible width of the SfTextArea, measured in average character widths. This property is only effective when the Width property is not set. If both ColumnCount and Width are specified, the Width property takes precedence.
Examples
<SfTextArea ColumnCount="30" RowCount="4" Placeholder="Enter text"></SfTextArea>Created
Gets or sets the event callback that will be invoked when the SfTextArea component is created.
Declaration
[Parameter]
public EventCallback<object> Created { get; set; }Property Value
| Type | Description |
|---|---|
| EventCallback<object> | An EventCallback<TValue> that is invoked when the SfTextArea component is successfully created and initialized. The callback receives an |
Remarks
The Created event is triggered once during the component lifecycle, immediately after the SfTextArea component has been rendered and initialized in the DOM. This event is useful for performing initialization tasks, setting up event handlers, or executing code that depends on the component being fully created.
Destroyed
Gets or sets the event callback that will be invoked when the SfTextArea component is destroyed.
Declaration
[Parameter]
public EventCallback<object> Destroyed { get; set; }Property Value
| Type | Description |
|---|---|
| EventCallback<object> | An EventCallback<TValue> that is invoked when the SfTextArea component is being destroyed or removed from the DOM. The callback receives an |
Remarks
The Destroyed event is triggered during the component cleanup phase, before the SfTextArea component is removed from the DOM. This event is useful for performing cleanup operations, disposing resources, removing event handlers, or executing code that should run when the component is being destroyed.
Disabled
Gets or sets a value indicating whether the SfTextArea component is disabled.
Declaration
[Obsolete("This property is obsolete. Use Enabled property instead.", false)]
[Parameter]
public bool Disabled { get; set; }Property Value
| Type | Description |
|---|---|
| bool | A boolean indicating whether the component is disabled. The default value is |
Remarks
Set this property to true to disable user interaction with the SfTextArea.
When disabled, the component appears grayed out and does not respond to user input or focus.
This property is obsolete and should be replaced with the Enabled property for better clarity.
Examples
<SfTextArea Disabled="true" Placeholder="Enter text" RowCount="4"></SfTextArea>FloatLabelType
Gets or sets the floating label behavior of the SfTextArea. The Placeholder text acts as a label.
Declaration
[Parameter]
public FloatLabelType FloatLabelType { get; set; }Property Value
| Type | Description |
|---|---|
| FloatLabelType | One of the FloatLabelType enumeration. The default value is Never. |
Remarks
- If the FloatLabelType is Never, the placeholder text does not float as a label.
- If the FloatLabelType is Auto, the placeholder text will float above the SfTextArea component as a label after focusing on it.
- If the FloatLabelType is Always, the placeholder text is displayed as a label above the SfTextArea component.
Examples
In the following code example, set the float label as Auto.
<SfTextArea FloatLabelType="FloatLabelType.Auto" Placeholder="Enter a value"></SfTextArea>Focus
Gets or sets the event callback that will be invoked when the SfTextArea gets focus.
Declaration
[Parameter]
public EventCallback<TextAreaFocusInEventArgs> Focus { get; set; }Property Value
| Type | Description |
|---|---|
| EventCallback<TextAreaFocusInEventArgs> | An EventCallback<TValue> that is invoked when the SfTextArea receives focus. The callback receives a TextAreaFocusInEventArgs containing focus-related information. |
Remarks
The Focus event is triggered when the user clicks on the SfTextArea, tabs to it, or programmatically sets focus to the component. This event is useful for performing actions when the textarea becomes active, such as highlighting the input area, showing validation messages, or updating the UI state. The event provides information about the focus operation through the TextAreaFocusInEventArgs parameter.
HtmlAttributes
Gets or sets a collection of additional attributes such as styles, class, and more that will be applied to the SfTextArea component.
Declaration
[Parameter]
public Dictionary<string, object> HtmlAttributes { get; set; }Property Value
| Type | Description |
|---|---|
| Dictionary<string, object> | The value as a dictionary collection. The default value is |
Remarks
If you configure both the property and equivalent HTML attributes, the component considers the property value.
Examples
<SfTextArea HtmlAttributes="@CustomAttribute">
</SfTextArea>
@code{
Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
{
{ "title", "Enter your text" }
};
}Input
Gets or sets the event callback that will be invoked when the user types or pastes text into the SfTextArea.
Declaration
[Parameter]
public EventCallback<TextAreaInputEventArgs> Input { get; set; }Property Value
| Type |
|---|
| EventCallback<TextAreaInputEventArgs> |
Remarks
The Input event is triggered whenever the user interacts with the SfTextArea by typing, pasting, or using any input method to modify the content. It provides real-time updates as the user enters text, allowing you to perform actions or validation based on the changing input.
It is important to note that the Input event may fire frequently during user input, potentially with each keystroke, so it is generally suitable for handling real-time updates or feedback rather than more intensive processing.
Examples
<SfTextArea Placeholder="Enter a value" Input="@OnInput">
</SfTextArea>
@code{
private void OnInput(TextAreaInputEventArgs args)
{
var TextValue = args.Value;
}
}InputAttributes
Gets or sets a collection of additional input attributes such as disabled, value, and more that will be applied to the SfTextArea component.
Declaration
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> InputAttributes { get; set; }Property Value
| Type | Description |
|---|---|
| Dictionary<string, object> | A dictionary collection containing additional input attributes. The default value is an empty dictionary. |
Remarks
Additional attributes can be added by specifying them as inline attributes or by using the @attributes directive.
If you configure both a property and its equivalent HTML attribute, the component considers the property value over the HTML attribute.
This property captures unmatched HTML attributes that are not explicitly defined as component parameters.
Examples
<SfTextArea Placeholder="Enter your Name" @attributes="@CustomAttribute">
</SfTextArea>
@code{
Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
{
{ "maxlength", "4" }
};
}MaxLength
Gets or sets the maximum number of characters allowed in the SfTextArea.
Declaration
[Parameter]
public int MaxLength { get; set; }Property Value
| Type | Description |
|---|---|
| int | An integer representing the maximum number of characters. The default value is -1, indicating no maximum limit. |
Remarks
Set this property to impose a maximum limit on the number of characters that can be entered into the SfTextArea. A value of -1 indicates no maximum limit, allowing unlimited text input. When the maximum length is reached, users will not be able to type additional characters.
Examples
<SfTextArea MaxLength="100" Placeholder="Enter text"></SfTextArea>Placeholder
Gets or sets the text that is shown as a hint or placeholder until the user focuses on the SfTextArea.
Declaration
[Parameter]
public string Placeholder { get; set; }Property Value
| Type | Description |
|---|---|
| string | A string representing the placeholder text. The default value is |
Remarks
The Placeholder property specifies the text that appears in the SfTextArea when it is empty, providing a hint to the user about the expected input.
Examples
<SfTextArea Placeholder="Enter text" RowCount="4"></SfTextArea>ReadOnly
Gets or sets a value indicating whether the SfTextArea is read-only.
Declaration
[Parameter]
public bool ReadOnly { get; set; }Property Value
| Type | Description |
|---|---|
| bool | A boolean indicating whether the SfTextArea is read-only. The default value is |
Remarks
Set this property to true to make the SfTextArea read-only, preventing user input.
Examples
<SfTextArea ReadOnly="true" Placeholder="Read-only text" RowCount="4"></SfTextArea>ResizeMode
Gets or sets the resize behavior of the SfTextArea.
Declaration
[Parameter]
public Resize ResizeMode { get; set; }Property Value
| Type | Description |
|---|---|
| Resize |
Remarks
- If the ResizeMode is None, the SfTextArea component should not be resizable ever.
- If the ResizeMode is Horizontal, the SfTextArea component resizable horizontally always.
- If the ResizeMode is Vertical, the SfTextArea component resizable vertically always.
- If the ResizeMode is Both, the SfTextArea component resizable both vertically and horizontally always.
Examples
In the following code example, set the resize mode as Horizontal.
<SfTextArea ResizeMode="Resize.Horizontal" Placeholder="Enter a value"></SfTextArea>RowCount
Gets or sets the number of lines that are visible in the SfTextArea.
Declaration
[Parameter]
public int RowCount { get; set; }Property Value
| Type | Description |
|---|---|
| int | An integer representing the number of lines. The default value is 2. |
Remarks
The RowCount property specifies the visible height of the SfTextArea, measured in lines of text. This determines how many lines of text are visible without scrolling. A higher RowCount value increases the initial height of the SfTextArea.
Examples
<SfTextArea RowCount="4" Placeholder="Enter text"></SfTextArea>ShowClearButton
Gets or sets a value indicating whether the clear button is displayed in the SfTextArea.
Declaration
[Parameter]
public bool ShowClearButton { get; set; }Property Value
| Type | Description |
|---|---|
| bool | A boolean indicating whether the clear button is displayed. The default value is |
Remarks
Set this property to true to show a clear button in the SfTextArea, allowing users to quickly remove all text content.
Examples
<SfTextArea ShowClearButton="true" Placeholder="Enter text" RowCount="4"></SfTextArea>TabIndex
Gets or sets the tab order of the SfTextArea component.
Declaration
[Parameter]
public int TabIndex { get; set; }Property Value
| Type | Description |
|---|---|
| int | An integer value representing the tab index of the SfTextArea component. The default value is 0. |
Remarks
The TabIndex property determines the order in which the SfTextArea component receives focus when users navigate through the page using the Tab key. A higher TabIndex value means the element will be focused later in the tab sequence. Setting TabIndex to -1 removes the element from the tab sequence, making it non-focusable via keyboard navigation.
Examples
<SfTextArea TabIndex="1" Placeholder="Enter text"></SfTextArea>ValueChange
Gets or sets the event callback that will be invoked when the content of SfTextArea has changed.
Declaration
[Parameter]
public EventCallback<TextAreaValueChangeEventArgs> ValueChange { get; set; }Property Value
| Type | Description |
|---|---|
| EventCallback<TextAreaValueChangeEventArgs> | An EventCallback<TValue> that is invoked when the value of the SfTextArea changes. The callback receives a TextAreaValueChangeEventArgs containing the changed value information. |
Remarks
The ValueChange event is triggered when the user modifies the text content and the SfTextArea loses focus, or when the value is programmatically changed. This event provides the old and new values, allowing you to track changes and perform validation or other operations based on the modified content. Unlike the Input event, ValueChange is typically fired less frequently and is suitable for handling final value changes rather than real-time input tracking.
Examples
<SfTextArea Placeholder="Enter a value" ValueChange="@OnChange">
</SfTextArea>
@code{
private void OnChange(TextAreaValueChangeEventArgs args)
{
var TextValue = args.Value;
}
}Width
Gets or sets the width of the SfTextArea component.
Declaration
[Parameter]
public string Width { get; set; }Property Value
| Type | Description |
|---|---|
| string | A string representing the width of the SfTextArea. The default value is |
Remarks
Use this property to specify the width of the SfTextArea, supporting various units such as auto, cm, mm, in, px, pt, pc, %, em, ex, ch, rem, vw, vh, vmin, vmax. If the Width property is not set, the width of the SfTextArea is determined by the ColumnCount property. The ColumnCount property specifies the visible width of the SfTextArea, measured in average character widths, with a default value of 20.
Examples
<SfTextArea Width="300px" Placeholder="Enter text" RowCount="4"></SfTextArea>Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
ChangeHandler(ChangeEventArgs)
Handles change events when the TextArea value is committed.
Declaration
protected override Task ChangeHandler(ChangeEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| ChangeEventArgs | args | The change event arguments containing the committed value. |
Returns
| Type | Description |
|---|---|
| Task | A Task representing the asynchronous change handling operation. |
Overrides
Remarks
This method updates the component's current value and triggers change events when the user commits their input, typically on blur or when pressing Enter in certain scenarios.
FocusAsync()
Sets the focus to the SfTextArea component for interaction.
Declaration
public Task FocusAsync()Returns
| Type | Description |
|---|---|
| Task | A Task that represents the asynchronous focus operation. |
Remarks
This method asynchronously sets the focus to the SfTextArea component, enabling user interaction. When called, the textarea element will receive focus and become the active input field on the page. This is useful for programmatically directing user attention to the textarea or improving accessibility.
Examples
<SfTextArea @ref="textAreaRef" Placeholder="Enter your text here"></SfTextArea>
@code {
SfTextArea textAreaRef;
private async Task SetFocusToTextArea()
{
await textAreaRef.FocusAsync();
}
}FocusHandler(FocusEventArgs)
Handles the focus event when the TextArea receives input focus.
Declaration
protected override Task FocusHandler(FocusEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| FocusEventArgs | args | The focus event arguments containing event details. |
Returns
| Type | Description |
|---|---|
| Task | A Task representing the asynchronous focus handling operation. |
Overrides
Remarks
This method triggers both the Focus event (with TextArea-specific event args) and the OnFocus event when the component receives focus, allowing for custom focus handling logic.
FocusOutAsync()
Removes the focus from the SfTextArea component, if the component is in focus state.
Declaration
public Task FocusOutAsync()Returns
| Type | Description |
|---|---|
| Task | A Task that represents the asynchronous focus removal operation. |
Remarks
This method asynchronously removes the focus from the SfTextArea component if it currently has focus. When called, the textarea element will lose focus and will no longer be the active input field. This method is useful for programmatically controlling focus flow or implementing custom navigation patterns. If the component is not currently focused, this method will have no effect.
Examples
<SfTextArea @ref="textAreaRef" Placeholder="Enter your text here"></SfTextArea>
@code {
SfTextArea textAreaRef;
private async Task RemoveFocusFromTextArea()
{
await textAreaRef.FocusOutAsync();
}
}FocusOutHandler(FocusEventArgs)
Handles the blur event when the TextArea loses input focus.
Declaration
protected override Task FocusOutHandler(FocusEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| FocusEventArgs | args | The focus event arguments containing event details. |
Returns
| Type | Description |
|---|---|
| Task | A Task representing the asynchronous blur handling operation. |
Overrides
Remarks
This method checks for value changes and triggers change events if the value has been modified. It also invokes the Blur event with TextArea-specific event arguments for custom blur handling.
GetPersistDataAsync()
Gets the properties to be maintained in the persisted state.
Declaration
public Task<string> GetPersistDataAsync()Returns
| Type | Description |
|---|---|
| Task<string> | A Task<TResult> of type string that represents the asynchronous operation. The result contains the persisted data as a JSON string, or |
Remarks
This method asynchronously retrieves the persisted state data for the SfTextArea component from the browser's local storage.
The returned string contains the serialized properties that were previously saved using the component's persistence functionality.
This method is typically used internally by the component to restore its state when the EnablePersistence property is enabled.
The persisted data is stored using the component's ID as the key in the browser's local storage.
Examples
<SfTextArea @ref="textAreaRef" ID="myTextArea" EnablePersistence="true" Placeholder="Enter your text here"></SfTextArea>
@code {
SfTextArea textAreaRef;
private async Task GetPersistedData()
{
string persistedData = await textAreaRef.GetPersistDataAsync();
if (!string.IsNullOrEmpty(persistedData))
{
// Process the persisted data
Console.WriteLine($"Persisted data: {persistedData}");
}
}
}InputHandler(ChangeEventArgs?)
Handles input events as the user types in the TextArea.
Declaration
protected override Task InputHandler(ChangeEventArgs? args)Parameters
| Type | Name | Description |
|---|---|---|
| ChangeEventArgs | args | The change event arguments containing the current input value. |
Returns
| Type | Description |
|---|---|
| Task | A Task representing the asynchronous input handling operation. |
Overrides
Remarks
This method captures real-time input changes and triggers the Input event with both current and previous values, enabling scenarios like character counting, real-time validation, or live formatting.
OnParametersSetAsync()
Handles parameter updates and property changes when the component receives new parameters.
Declaration
protected override Task OnParametersSetAsync()Returns
| Type | Description |
|---|---|
| Task | A Task representing the asynchronous parameter update operation. |
Overrides
Remarks
This method is called whenever the component's parameters are updated. It processes property changes, updates the component state accordingly, and ensures validation classes are properly applied.