Class SfNumericTextBox<TValue>

The NumericTextBox is used to get the number inputs from the user. The input values can be incremented or decremented by a predefined step value.

Inheritance
System.Object
SfBaseComponent
SfInputTextBase<TValue>
SfNumericTextBox<TValue>
Inherited Members
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BlurHandler()
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ClickStopPropagation
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ContainerClass
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.IsValueTemplate
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.MouseDowSpinnerPrevent
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.MousePreventContainer
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnBlur
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnChange
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnFocus
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnInput
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnPaste
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.PreventIconHandler
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.RootClass
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.SpinButton
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ValueExpression
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ValueTemplate
Namespace: Syncfusion.Blazor.Inputs
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfNumericTextBox<TValue> : SfInputTextBase<TValue>
Type Parameters
Name Description
TValue

Specifies the type of SfNumericTextBox.

Constructors

SfNumericTextBox()

Declaration
public SfNumericTextBox()

Properties

BaseFloatLabelType

Declaration
protected override FloatLabelType BaseFloatLabelType { get; set; }
Property Value
Type
FloatLabelType
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.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<TValue>.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<TValue>.BaseInputAttributes

BaseIsReadOnlyInput

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

BasePlaceholder

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

BaseReadonly

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

BaseShowClearButton

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

BaseTabIndex

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

BaseWidth

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

Currency

Gets or sets the currency code to use in currency formatting. Possible values are the ISO 4217 currency codes, such as USD for the US dollar and EUR for the euro.

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

Accepts the string value representing the currency code.

Decimals

Gets or sets the number of decimal places to display for numeric values.

Declaration
public Nullable<int> Decimals { get; set; }
Property Value
Type Description
System.Nullable<System.Int32>

An integer value representing the number of decimal places. Use null to display the default number of decimal places.

FloatLabelType

Gets or sets the floating label behavior of the SfNumericTextBox<TValue>. 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 Numeric TextBox component as a label after focusing it. If the FloatLabelType is Always, the placeholder text is displayed as a label above the Numeric TextBox component.

Examples

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

  <SfNumericTextBox TValue="int?" Placeholder="Enter the value" FloatLabelType="FloatLabelType.Auto">
  </SfNumericTextBox>

Format

Gets or sets the format string used to display numeric values.

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

A string value representing the format pattern. The default value is n2 which represents a number with two decimal places.
Remarks

You can customize the format string according to your requirements. The format string follows the standard format specifiers used in .NET formatting. For example, n3 would display a number with three decimal places.

Examples
  <SfNumericTextBox TValue="decimal?" Placeholder="Enter the value" Format="n3" >
  </SfNumericTextBox>

HtmlAttributes

Gets or sets a collection of additional attributes such as styles, class, and more that will be applied to the SfNumericTextBox<TValue> 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
<SfNumericTextBox TValue="int?" HtmlAttributes="@CustomAttribute">
</SfNumericTextBox>
@code{
    Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
    {
        { "title", "Please enter the unit" }
    };
}

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
<SfNumericTextBox TValue="int?" Placeholder="Enter the PIN" @attributes="@CustomAttribute">
</SfNumericTextBox>
@code{
    Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
    {
        { "maxlength", "4" }
    };
}

Max

Gets or sets the maximum allowable value for the input.

Declaration
public TValue Max { get; set; }
Property Value
Type Description
TValue

The maximum allowable value for the input. The default value is determined by the maximum possible value for the data type.
Examples
  <SfNumericTextBox TValue="int?" Placeholder="Enter the value" Max=10 >
  </SfNumericTextBox>

Min

Gets or sets the minimum allowable value for the input.

Declaration
public TValue Min { get; set; }
Property Value
Type Description
TValue

The minimum allowable value for the input. The default value is determined by the minimum possible value for the data type.
Examples
  <SfNumericTextBox TValue="int?" Placeholder="Enter the value" Min=5 >
  </SfNumericTextBox>

Placeholder

Gets or sets the text that is displayed when the SfNumericTextBox<TValue> 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 SfNumericTextBox<TValue> 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.

ShowClearButton

Get or sets a value that indicates whether the clear button is displayed in SfNumericTextBox<TValue> 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.

ShowSpinButton

Gets or sets a value indicating whether to display spin buttons for incrementing and decrementing the numeric value.

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

true if spin buttons should be shown; otherwise, false

Step

Gets or sets the increment or decrement value for changing the numeric value.

Declaration
public TValue Step { get; set; }
Property Value
Type Description
TValue

The step value that determines how much the numeric value changes when interacting with the component.
Examples
  <SfNumericTextBox TValue="int?" Placeholder="Enter the value" Step=5 >
  </SfNumericTextBox>

StrictMode

Gets or sets a value indicating whether the component operates in strict mode for value validation.

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

true, if input value will be restricted between the min and max range. The typed value gets modified to fit the range on a focused out state. Otherwise, false it allows any value even out of range value, at that time of wrong value entered, the error class will be added to the component to highlight the error. The default value is true.

TabIndex

Gets or sets the tab order of the SfNumericTextBox<TValue> component.

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

An integer value representing the tab index of the component.

ValidateDecimalOnType

Gets or sets a value indicating whether to perform decimal validation during typing.

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

true if decimal validation should be performed during typing; otherwise, false.

Width

Gets or sets the width of the SfNumericTextBox<TValue> 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
  <SfNumericTextBox TValue="int?" Width="200px">
  </SfNumericTextBox>

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

DecrementAsync(TValue)

Decrements the value asynchronously by the specified step.

Declaration
public Task DecrementAsync(TValue step)
Parameters
Type Name Description
TValue step

The step value by which to decrement the current value. If its not given then numeric value will be decremented based on the Step property value.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing the asynchronous operation.

FocusAsync()

Sets the focus to the NumericTextBox component for interaction.

Declaration
public Task FocusAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing the asynchronous operation.

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<TValue>.FocusHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)

FocusOutAsync()

Remove the focus from the NumericTextBox component, if the component is in focus state.

Declaration
public Task FocusOutAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing the asynchronous operation.

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<TValue>.FocusOutHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)

FormatValue(String)

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

FormatValueAsString(TValue)

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

GetFormattedText()

Gets the formatted text representation of the current value.

Declaration
public string GetFormattedText()
Returns
Type Description
System.String

The formatted text representation of the current value.

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>

A System.Threading.Tasks.Task representing the asynchronous operation.

IncrementAsync(TValue)

Increments the NumericTextBox value with the specified step value.

Specifies the value used to increment the NumericTextBox value.If its not given then numeric value will be incremented based on the Step property value.
Declaration
public Task IncrementAsync(TValue step)
Parameters
Type Name Description
TValue step
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing the asynchronous operation.