Class NumericTextBoxModel<T>

Represents the configuration model for the NumericTextBox component.

Inheritance
System.Object
NumericTextBoxModel<T>
Namespace: Syncfusion.Blazor.Inputs
Assembly: Syncfusion.Blazor.dll
Syntax
public class NumericTextBoxModel<T> : Object
Type Parameters
Name Description
T

The type of the numeric value that the NumericTextBox will handle.
Remarks

This class contains all the configurable properties for the NumericTextBox component, including formatting options, validation settings, and behavioral configurations. It supports various numeric types such as int, double, decimal, and float.

Examples
<SfNumericTextBox TValue="double" 
                  Value="@model.Value"
                  Min="@model.Min"
                  Max="@model.Max"
                  Step="@model.Step"
                  Format="@model.Format">
</SfNumericTextBox>

@code {
    private NumericTextBoxModel<double> model = new NumericTextBoxModel<double>
    {
        Value = 10.5,
        Min = 0,
        Max = 100,
        Step = 0.1,
        Format = "n2"
    };
}

Constructors

NumericTextBoxModel()

Declaration
public NumericTextBoxModel()

Properties

CssClass

Gets or sets the CSS class names to be applied to the NumericTextBox root element.

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

A System.String containing one or more CSS class names separated by spaces, or null if no custom classes are applied.
Remarks

Multiple CSS classes can be specified by separating them with spaces.

These classes are applied in addition to the default Syncfusion CSS classes.

Examples
<SfNumericTextBox CssClass="custom-numeric my-style" TValue="int"></SfNumericTextBox>

Currency

Gets or sets the currency code for currency formatting.

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

A System.String representing an ISO 4217 currency code, or null if no currency formatting is applied.
Remarks

Use standard ISO 4217 currency codes such as:

  • USD - US Dollar
  • EUR - Euro
  • GBP - British Pound
  • JPY - Japanese Yen

This property works in conjunction with the Format property to display currency values.

Examples
<SfNumericTextBox TValue="decimal" Currency="USD" Format="c2"></SfNumericTextBox>

Decimals

Gets or sets the number of decimal places to display when the NumericTextBox is focused.

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

An System.Int32 value representing the number of decimal places, or null to use the default precision.
Remarks

This property controls the precision shown during editing (when focused).

When the control loses focus, the number of decimals may be adjusted based on the Format property.

If not specified, the default precision based on the numeric type will be used.

Examples
<SfNumericTextBox TValue="double" Decimals="3" Value="123.456789"></SfNumericTextBox>
<!-- Shows 123.457 when focused -->

Enabled

Gets or sets a value indicating whether the NumericTextBox is enabled for user interaction.

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

true if the NumericTextBox is enabled; otherwise, false. The default is true.
Remarks

When disabled (false), the NumericTextBox:

  • Cannot receive focus
  • Does not respond to user input
  • Appears visually disabled (grayed out)
  • Is excluded from form submissions
Examples
<SfNumericTextBox TValue="int" Enabled="false" Value="100"></SfNumericTextBox>

EnablePersistence

Gets or sets a value indicating whether the NumericTextBox state should be persisted between page reloads.

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

true to enable state persistence; otherwise, false. The default is false.
Remarks

When enabled, the following properties are persisted:

  • Value - The current numeric value

The state is stored in the browser's local storage using the component's ID as the key.

Examples
<SfNumericTextBox TValue="int" EnablePersistence="true" ID="myNumeric"></SfNumericTextBox>

EnableRtl

Gets or sets a value indicating whether the NumericTextBox should be rendered in right-to-left direction.

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

true to enable right-to-left rendering; otherwise, false. The default is false.
Remarks

When enabled, the component layout and text direction are reversed to support RTL languages such as Arabic or Hebrew.

This affects the positioning of spin buttons, clear button, and text alignment.

Examples
<SfNumericTextBox TValue="int" EnableRtl="true"></SfNumericTextBox>

FloatLabelType

Gets or sets the floating label behavior for the NumericTextBox.

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

A FloatLabelType value that determines how the placeholder text behaves as a floating label. The default is Never.
Remarks

The floating label behavior options are:

  • NeverThe placeholder text remains static and does not float above the input.
  • AlwaysThe label always appears above the input field, regardless of focus or content.
  • AutoThe label floats above the input when focused or when the input contains a value.

This property works in conjunction with the Placeholder property.

Examples
<SfNumericTextBox TValue="double" 
                  Placeholder="Enter amount" 
                  FloatLabelType="FloatLabelType.Auto">
</SfNumericTextBox>

Format

Gets or sets the format string that defines how the numeric value is displayed.

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

A System.String representing a .NET numeric format string, or null to use the default format.
Remarks

Supports standard and custom .NET numeric format strings:

  • Standard formats: "n" (number), "c" (currency), "p" (percentage), "f" (fixed-point)
  • Custom formats: "#,##0.00", "0.###", etc.

The format is applied when the control loses focus or for display purposes.

During editing (when focused), the precision may be controlled by the Decimals property.

Examples
<SfNumericTextBox TValue="decimal" Format="c2" Currency="USD"></SfNumericTextBox>
<!-- Displays as $123.45 -->

<SfNumericTextBox TValue="double" Format="n3"></SfNumericTextBox>
<!-- Displays as 1,234.567 -->

HtmlAttributes

Gets or sets additional HTML attributes to be applied to the NumericTextBox root element.

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

A System.Collections.Generic.Dictionary<, > where keys are attribute names and values are attribute values, or null if no additional attributes are specified.
Remarks

This allows you to add custom HTML attributes such as:

  • Custom CSS styles
  • Data attributes
  • ARIA attributes for accessibility
  • Custom event handlers

Note: If both a component property and an equivalent HTML attribute are specified, the component property takes precedence.

Examples
@{
    var htmlAttributes = new Dictionary<string, object>
    {
        { "style", "border: 2px solid red;" },
        { "data-testid", "amount-input" },
        { "aria-label", "Enter amount" }
    };
}
<SfNumericTextBox TValue="decimal" HtmlAttributes="@htmlAttributes"></SfNumericTextBox>

InputAttributes

Gets or sets additional HTML attributes to be applied to the input element of the NumericTextBox.

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

A System.Collections.Generic.Dictionary<, > where keys are attribute names and values are attribute values, or null if no additional input attributes are specified.
Remarks

This allows you to add custom HTML attributes specifically to the input element, such as:

  • Form-related attributes (name, form, etc.)
  • Validation attributes (required, pattern, etc.)
  • Accessibility attributes (aria-describedby, etc.)
  • Custom data attributes

Note: If both a component property and an equivalent input attribute are specified, the component property takes precedence.

Examples
@{
    var inputAttributes = new Dictionary<string, object>
    {
        { "name", "amount" },
        { "data-validation", "required" },
        { "aria-describedby", "amount-help" }
    };
}
<SfNumericTextBox TValue="decimal" InputAttributes="@inputAttributes"></SfNumericTextBox>

Max

Gets or sets the maximum allowed value for the NumericTextBox.

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

The maximum value of type T, or null if no maximum constraint is applied.
Remarks

When specified, this property:

  • Prevents users from entering values greater than the maximum
  • Disables the up spin button when the maximum is reached
  • Works with StrictMode to control validation behavior
  • Affects keyboard navigation and mouse wheel interactions

The maximum value should be greater than or equal to the Min value.

Examples
<SfNumericTextBox TValue="int" Min="0" Max="100" Value="50"></SfNumericTextBox>
<!-- Allows values from 0 to 100 -->

<SfNumericTextBox TValue="decimal" Max="999.99" Format="c2"></SfNumericTextBox>
<!-- Currency input with maximum limit -->

Min

Gets or sets the minimum allowed value for the NumericTextBox.

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

The minimum value of type T, or null if no minimum constraint is applied.
Remarks

When specified, this property:

  • Prevents users from entering values less than the minimum
  • Disables the down spin button when the minimum is reached
  • Works with StrictMode to control validation behavior
  • Affects keyboard navigation and mouse wheel interactions

The minimum value should be less than or equal to the Max value.

Examples
<SfNumericTextBox TValue="double" Min="0.0" Max="100.0" Step="0.1"></SfNumericTextBox>
<!-- Allows values from 0.0 to 100.0 with 0.1 increments -->

<SfNumericTextBox TValue="int" Min="-50" Max="50"></SfNumericTextBox>
<!-- Allows negative and positive values -->

Placeholder

Gets or sets the placeholder text displayed when the NumericTextBox is empty.

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

A System.String containing the placeholder text, or null if no placeholder is specified.
Remarks

The placeholder text serves as a hint to users about the expected input.

The behavior of the placeholder is influenced by the FloatLabelType property:

  • When Never, it appears as static placeholder text
  • When Auto or Always, it acts as a floating label
Examples
<SfNumericTextBox TValue="double" Placeholder="Enter amount"></SfNumericTextBox>

Readonly

Gets or sets a value indicating whether the NumericTextBox is read-only.

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

true if the NumericTextBox is read-only; otherwise, false. The default is false.
Remarks

When read-only (true), the NumericTextBox:

  • Displays the current value but prevents editing
  • Can still receive focus and be selected
  • Does not show spin buttons or clear button
  • Can be included in form submissions

This differs from Enabled = false, which completely disables interaction.

Examples
<SfNumericTextBox TValue="decimal" Readonly="true" Value="1000"></SfNumericTextBox>

ShowClearButton

Gets or sets a value indicating whether the clear button is displayed in the NumericTextBox.

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

true to display the clear button; otherwise, false. The default is false.
Remarks

When enabled, a clear button (×) appears on the right side of the input when it contains a value.

Clicking the clear button removes the current value and triggers the ValueChange event.

The clear button is automatically hidden when the input is empty, disabled, or read-only.

Examples
<SfNumericTextBox TValue="int" ShowClearButton="true" Value="100"></SfNumericTextBox>

ShowSpinButton

Gets or sets a value indicating whether the spin buttons (up/down arrows) are displayed in the NumericTextBox.

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

true to display the spin buttons; otherwise, false. The default is true.
Remarks

When enabled, up and down arrow buttons appear that allow users to increment or decrement the value.

The increment/decrement amount is controlled by the Step property.

Spin buttons respect the Min and Max value constraints.

The buttons are automatically disabled when the input is disabled or read-only.

Examples
<SfNumericTextBox TValue="double" ShowSpinButton="true" Step="0.5"></SfNumericTextBox>

Step

Gets or sets the increment/decrement step size for the NumericTextBox spin buttons and keyboard navigation.

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

A value of type T representing the step size, or null to use the default step (1 for integers, 0.01 for decimals).
Remarks

This property controls:

  • The amount by which the value changes when spin buttons are clicked
  • The increment/decrement when using Up/Down arrow keys
  • The step size for mouse wheel scrolling (if enabled)

The step value should be positive and appropriate for the value type and range.

Examples
<SfNumericTextBox TValue="double" Step="0.5" Min="0" Max="10"></SfNumericTextBox>
<!-- Values: 0, 0.5, 1.0, 1.5, 2.0, ... -->

<SfNumericTextBox TValue="int" Step="5" Min="0" Max="100"></SfNumericTextBox>
<!-- Values: 0, 5, 10, 15, 20, ... -->

StrictMode

Gets or sets a value indicating whether the NumericTextBox should enforce strict value range validation.

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

true to enforce strict mode where values are automatically corrected to fit within the Min/Max range; otherwise, false to allow out-of-range values with visual error indication. The default is true.
Remarks

When true (strict mode):

  • Values are automatically clamped to the Min/Max range on blur
  • Invalid values are corrected to the nearest valid value
  • No error styling is applied

When false (non-strict mode):

  • Out-of-range values are preserved
  • Error CSS classes are applied for visual feedback
  • Validation logic must be handled separately
Examples
<!-- Strict mode: values auto-corrected -->
<SfNumericTextBox TValue="int" StrictMode="true" Min="0" Max="100"></SfNumericTextBox>

<!-- Non-strict mode: shows error styling for invalid values -->
<SfNumericTextBox TValue="int" StrictMode="false" Min="0" Max="100"></SfNumericTextBox>

TabIndex

Gets or sets the tab order of the NumericTextBox in the document's tab sequence.

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

An System.Int32 value representing the tab index. The default is 0.
Remarks

Controls the order in which the NumericTextBox receives focus when users navigate using the Tab key:

  • Positive values: Elements are focused in increasing numerical order
  • 0: Element is focused in its natural document order
  • -1: Element can be focused programmatically but is excluded from tab navigation

This property sets the HTML tabindex attribute on the input element.

Examples
<SfNumericTextBox TValue="int" TabIndex="1"></SfNumericTextBox>
<SfNumericTextBox TValue="double" TabIndex="2"></SfNumericTextBox>

ValidateDecimalOnType

Gets or sets a value indicating whether decimal places should be validated during typing.

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

true to restrict decimal input during typing based on the Decimals property; otherwise, false to allow unrestricted decimal input during typing. The default is false.
Remarks

When true:

  • Users cannot type more decimal places than specified by Decimals
  • Prevents invalid decimal input in real-time
  • Provides immediate feedback during typing

When false:

  • Users can type any number of decimal places during editing
  • Validation occurs on blur or form submission
  • Value is formatted according to Decimals when focus is lost
Examples
<!-- Restricts to 2 decimal places during typing -->
<SfNumericTextBox TValue="decimal" 
                  ValidateDecimalOnType="true" 
                  Decimals="2"></SfNumericTextBox>

Value

Gets or sets the current value of the NumericTextBox.

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

The current numeric value of type T, or null if no value is set or the input is empty.
Remarks

This property supports two-way data binding and triggers change events when modified.

The value is subject to validation based on:

  • Min and Max constraints
  • StrictMode behavior
  • Type-specific precision and formatting rules

When setting the value programmatically, it will be formatted according to the Format property.

Examples
<SfNumericTextBox @bind-Value="@currentValue" TValue="double"></SfNumericTextBox>

@code {
    private double currentValue = 25.75;
}

Width

Gets or sets the width of the NumericTextBox component.

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

A System.String representing the width in CSS units (px, %, em, etc.), or null to use the default width.
Remarks

Accepts any valid CSS width value such as:

  • "200px" - Fixed pixel width
  • "50%" - Percentage of parent container
  • "15em" - Relative to font size
  • "auto" - Automatic sizing

If not specified, the component uses its default width based on the theme and content.

Examples
<SfNumericTextBox TValue="int" Width="250px"></SfNumericTextBox>
<SfNumericTextBox TValue="double" Width="100%"></SfNumericTextBox>