Class SfTextBox

The TextBox is an input element that allows to get input from the user. It allows the user to edit or display the text value.

Inheritance
System.Object
SfBaseComponent
SfInputTextBase<System.String>
SfTextBox
Inherited Members
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BlurHandler()
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.ClickStopPropagation
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.IsValueTemplate
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.MouseDowSpinnerPrevent
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.MousePreventContainer
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.OnBlur
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.OnChange
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.OnFocus
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.OnInput
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.OnPaste
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.PreventIconHandler
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.SpinButton
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.ValueExpression
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.ValueTemplate
Namespace: Syncfusion.Blazor.Inputs
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfTextBox : SfInputTextBase<string>

Constructors

SfTextBox()

Declaration
public SfTextBox()

Properties

Autocomplete

Gets or sets a value indicating whether the browser should automatically enter or suggest a value for the TextBox.

Declaration
public AutoComplete Autocomplete { get; set; }
Property Value
Type Description
AutoComplete

One of the AutoComplete enumeration.The default value is On for TextBox. Possible values are:

  • OnSpecifies that autocomplete is enabled
  • OffSpecifies that autocomplete is disabled.

BaseAutocomplete

Declaration
protected override string BaseAutocomplete { get; set; }
Property Value
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseAutocomplete

BaseFloatLabelType

Declaration
protected override FloatLabelType BaseFloatLabelType { get; set; }
Property Value
Type
FloatLabelType
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseFloatLabelType

BaseHtmlAttributes

Declaration
protected override Dictionary<string, object> BaseHtmlAttributes { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseHtmlAttributes

BaseInputAttributes

Declaration
protected override Dictionary<string, object> BaseInputAttributes { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseInputAttributes

BaseIsReadOnlyInput

Declaration
protected override bool BaseIsReadOnlyInput { get; set; }
Property Value
Type
System.Boolean
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseIsReadOnlyInput

BasePlaceholder

Declaration
protected override string BasePlaceholder { get; set; }
Property Value
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BasePlaceholder

BaseReadonly

Declaration
protected override bool BaseReadonly { get; set; }
Property Value
Type
System.Boolean
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseReadonly

BaseShowClearButton

Declaration
protected override bool BaseShowClearButton { get; set; }
Property Value
Type
System.Boolean
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseShowClearButton

BaseTabIndex

Declaration
protected override int BaseTabIndex { get; set; }
Property Value
Type
System.Int32
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseTabIndex

BaseWidth

Declaration
protected override string BaseWidth { get; set; }
Property Value
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.BaseWidth

Blur

Gets or sets the event callback that will be invoked when the TextBox loses focus.

Declaration
public EventCallback<FocusOutEventArgs> Blur { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<FocusOutEventArgs>

ContainerClass

Declaration
protected override string ContainerClass { get; set; }
Property Value
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.ContainerClass

Created

Gets or sets the event callback that will be invoked when the TextBox 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 TextBox component is destroyed.

Declaration
public EventCallback<object> Destroyed { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<System.Object>

FloatLabelType

Gets or sets the floating label behavior of the SfTextBox. The Placeholder text act as a lable.

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 TextBox component as a label after focusing it. If the FloatLabelType is Always, the placeholder text is displayed as a label above the TextBox component.

Examples

In the following code example, set the float lable as Auto.

  <SfTextBox FloatLabelType="FloatLabelType.Auto" Placeholder="Enter a value"></SfTextBox>

Focus

Gets or sets the event callback that will be invoked when the TextBox gets focus.

Declaration
public EventCallback<FocusInEventArgs> Focus { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<FocusInEventArgs>

HtmlAttributes

Gets or sets a collection of additional attributes such as styles, class, and more that will be applied to the TextBox component.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

The value as dictionary collection.The default value is null
Remarks

If you configured both property and equivalent html attributes, then the component considers the property value.

Examples
<SfTextBox HtmlAttributes="@CustomAttribute">
</SfTextBox>
@code{
    Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
    {
        { "title", "Enter your name" }
    };
}

Input

Gets or sets the event callback that will be invoked when the user types or pastes text into the TextBox.

Declaration
public EventCallback<InputEventArgs> Input { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<InputEventArgs>
Remarks

The Input event is triggered whenever the user interacts with the TextBox 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
<SfTextBox Placeholder="Enter a value" Input="@OnInput">
</SfTextBox>
@code{
    private void OnInput(InputEventArgs 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 TextBox 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 null
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
<SfTextBox Placeholder="Enter the PIN" @attributes="@CustomAttribute">
</SfTextBox>
@code{
    Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
    {
        { "maxlength", "4" }
    };
}

Multiline

Gets or sets a boolean value that enables or disables the multiline(textarea) on the TextBox. The TextBox changes from a single line to multiline when enabling this multiline mode.

Declaration
public bool Multiline { get; set; }
Property Value
Type Description
System.Boolean

true to enable multiline mode (textarea); false to keep it as a single line TextBox.
Remarks

Enabling multiline mode for the TextBox allows users to enter and display text across multiple lines, effectively converting it into a textarea component. This can be useful when you need to capture longer or formatted text, such as in comments, descriptions, or any scenario that requires multiple lines of input.

MultilineInput

Declaration
protected override bool MultilineInput { get; set; }
Property Value
Type
System.Boolean
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.MultilineInput

Placeholder

Gets or sets the text that is displayed when the SfTextBox has no value and remove on the focus.

Declaration
public string Placeholder { get; set; }
Property Value
Type Description
System.String

The text that is displayed when the TextBox has no value. The default value is String.Empty.
Remarks

The property depends on the FloatLabelType property, The placeholder text acts as a label.

Readonly

Gets or sets the boolean value whether the SfTextBox allows the user to change the text.

Declaration
public bool Readonly { get; set; }
Property Value
Type Description
System.Boolean

true, if the TextBox component cannot be edited. Otherwise, false.

RootClass

Declaration
protected override string RootClass { get; set; }
Property Value
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.RootClass

ShowClearButton

Get or sets a value that indicates whether the clear button is displayed in SfTextBox component.

Declaration
public bool ShowClearButton { get; set; }
Property Value
Type Description
System.Boolean

true, if the clear button should be shown. Otherwise, false.The default is false.

TabIndex

Gets or sets the tab order of the SfTextBox component.

Declaration
public int TabIndex { get; set; }
Property Value
Type Description
System.Int32

An integer value representing the tab index of SfTextBox component.
Examples
  <SfTextBox TabIndex=1></SfTextBox>

Type

Gets or sets the behavior of the TextBox such as text, password, email, and more.

Declaration
public InputType Type { get; set; }
Property Value
Type Description
InputType

One of the InputType enumeration that specifies the type of input in the component.

ValueChange

Gets or sets the event callback that will be invoked when the content of TextBox has changed.

Declaration
public EventCallback<ChangedEventArgs> ValueChange { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<ChangedEventArgs>
Examples
<SfTextBox Placeholder="Enter a value" ValueChange="@OnChange">
</SfTextBox>
@code{
    private void OnChange(ChangedEventArgs args)
    {
        var TextValue = args.Value;
    }
}

Width

Gets or sets the width of the SfTextBox component.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

The preferred width in pixels or percentage value. The default value is 100%.
Examples
  <SfTextBox Width="300px"></SfTextBox>

Methods

AddIconAsync(String, String, Dictionary<String, Object>)

Adding the icons to the TextBox component.

Declaration
public Task AddIconAsync(string position, string icons, Dictionary<string, object> events = null)
Parameters
Type Name Description
System.String position

The position where icons should be added, either prepend or append.
System.String icons

The CSS classes representing the icons to be added to the icon element.
System.Collections.Generic.Dictionary<System.String, System.Object> events

The icon events that should be added to the events element.
Returns
Type Description
System.Threading.Tasks.Task

Task.
Examples

The below code demonstrates usage of AddIconAsync(String, String, Dictionary<String, Object>) method through component instance. While passing Events parameter, ontouchstart denotes the Event type and the touchstart denotes the EventHandler method.

Instance.AddIconAsync("prepend", "e-icon-pan", new Dictionary<string, object>() { { "ontouchstart", touchStart } });

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
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.ChangeHandler(Microsoft.AspNetCore.Components.ChangeEventArgs)

FocusAsync()

Sets the focus to TextBox 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
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.FocusHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)

FocusOutAsync()

Remove the focus from TextBox 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
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.FocusOutHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)

FormatValue(String)

Declaration
protected override string FormatValue(string genericValue)
Parameters
Type Name Description
System.String genericValue
Returns
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.FormatValue(System.String)

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
Syncfusion.Blazor.Inputs.SfInputTextBase<System.String>.InputHandler(Microsoft.AspNetCore.Components.ChangeEventArgs)