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.
Inherited Members
Namespace: Syncfusion.Blazor.Inputs
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfTextArea : SfInputTextBase<string>Constructors
SfTextArea()
Declaration
public SfTextArea()Properties
BaseFloatLabelType
Declaration
protected override FloatLabelType BaseFloatLabelType { get; set; }Property Value
| Type |
|---|
| FloatLabelType |
Overrides
BaseHtmlAttributes
Declaration
protected override Dictionary<string, object> BaseHtmlAttributes { get; set; }Property Value
| Type |
|---|
| System.Collections.Generic.Dictionary<System.String, System.Object> |
Overrides
BaseInputAttributes
Declaration
protected override Dictionary<string, object> BaseInputAttributes { get; set; }Property Value
| Type |
|---|
| System.Collections.Generic.Dictionary<System.String, System.Object> |
Overrides
BasePlaceholder
Declaration
protected override string BasePlaceholder { get; set; }Property Value
| Type |
|---|
| System.String |
Overrides
BaseReadonly
Declaration
protected override bool BaseReadonly { get; set; }Property Value
| Type |
|---|
| System.Boolean |
Overrides
BaseShowClearButton
Declaration
protected override bool BaseShowClearButton { get; set; }Property Value
| Type |
|---|
| System.Boolean |
Overrides
BaseTabIndex
Declaration
protected override int BaseTabIndex { get; set; }Property Value
| Type |
|---|
| System.Int32 |
Overrides
Blur
Gets or sets the event callback that will be invoked when the SfTextArea loses focus.
Declaration
public EventCallback<TextAreaFocusOutEventArgs> Blur { get; set; }Property Value
| Type |
|---|
| Microsoft.AspNetCore.Components.EventCallback<TextAreaFocusOutEventArgs> |
ColumnCount
Gets or sets the number of columns for the SfTextArea component.
Declaration
public int ColumnCount { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | 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.
Created
Gets or sets the event callback that will be invoked when the SfTextArea component is created.
Declaration
public EventCallback<object> Created { get; set; }Property Value
| Type |
|---|
| Microsoft.AspNetCore.Components.EventCallback<System.Object> |
Destroyed
Gets or sets the event callback that will be invoked when the SfTextArea component is destroyed.
Declaration
public EventCallback<object> Destroyed { get; set; }Property Value
| Type |
|---|
| Microsoft.AspNetCore.Components.EventCallback<System.Object> |
Disabled
Gets or sets a value indicating whether the SfTextArea component is enabled.
Declaration
public bool Disabled { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean | A boolean indicating whether the component is enabled. The default value is |
Remarks
Set this property to true to disable user interaction with the SfTextArea.
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
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
public EventCallback<TextAreaFocusInEventArgs> Focus { get; set; }Property Value
| Type |
|---|
| Microsoft.AspNetCore.Components.EventCallback<TextAreaFocusInEventArgs> |
HtmlAttributes
Gets or sets a collection of additional attributes such as styles, class, and more that will be applied to the SfTextArea component.
Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }Property Value
| Type | Description |
|---|---|
| System.Collections.Generic.Dictionary<System.String, System.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
public EventCallback<TextAreaInputEventArgs> Input { get; set; }Property Value
| Type |
|---|
| Microsoft.AspNetCore.Components.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 inputs attributes such as disabled, value, and more that will be applied to the TextArea component.
Declaration
public Dictionary<string, object> InputAttributes { get; set; }Property Value
| Type | Description |
|---|---|
| System.Collections.Generic.Dictionary<System.String, System.Object> | The value as dictionary collection.The default value is |
Remarks
Additional attributes can be added by specifying as inline attributes or by specifying @attributes directive.
If you configured both property and equivalent html attributes, then the component considers the property value.
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
public int MaxLength { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | 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.
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
public string Placeholder { get; set; }Property Value
| Type | Description |
|---|---|
| System.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
public bool ReadOnly { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean | 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
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
public int RowCount { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | An integer representing the number of lines. The default value is 2. |
Remarks
The RowCount property specifies the visible height of the textarea, measured in lines.
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
public bool ShowClearButton { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean | 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
public int TabIndex { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | An integer value representing the tab index of SfTextArea component. |
Examples
<SfTextArea TabIndex=1></SfTextArea>ValueChange
Gets or sets the event callback that will be invoked when the content of SfTextArea has changed.
Declaration
public EventCallback<TextAreaValueChangeEventArgs> ValueChange { get; set; }Property Value
| Type |
|---|
| Microsoft.AspNetCore.Components.EventCallback<TextAreaValueChangeEventArgs> |
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
public string Width { get; set; }Property Value
| Type | Description |
|---|---|
| System.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 |
|---|---|---|
| Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
ChangeHandler(ChangeEventArgs)
Declaration
protected override Task ChangeHandler(ChangeEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| Microsoft.AspNetCore.Components.ChangeEventArgs | args |
Returns
| Type |
|---|
| System.Threading.Tasks.Task |
Overrides
FocusAsync()
Sets the focus to SfTextArea component for interaction.
Declaration
public Task FocusAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | Task. |
FocusHandler(FocusEventArgs)
Declaration
protected override Task FocusHandler(FocusEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| Microsoft.AspNetCore.Components.Web.FocusEventArgs | args |
Returns
| Type |
|---|
| System.Threading.Tasks.Task |
Overrides
FocusOutAsync()
Remove the focus from SfTextArea component, if the component is in focus state.
Declaration
public Task FocusOutAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | Task. |
FocusOutHandler(FocusEventArgs)
Declaration
protected override Task FocusOutHandler(FocusEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| Microsoft.AspNetCore.Components.Web.FocusEventArgs | args |
Returns
| Type |
|---|
| System.Threading.Tasks.Task |
Overrides
GetPersistDataAsync()
Gets the properties to be maintained in the persisted state.
Declaration
public Task<string> GetPersistDataAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task<System.String> | Task. |
InputHandler(ChangeEventArgs)
Declaration
protected override Task InputHandler(ChangeEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| Microsoft.AspNetCore.Components.ChangeEventArgs | args |
Returns
| Type |
|---|
| System.Threading.Tasks.Task |
Overrides
OnParametersSetAsync()
Triggers when dynamically changing the component property.
Declaration
protected override Task OnParametersSetAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | The System.Threading.Tasks.Task. |