Class

TelerikNumericTextBox<T>

Declaration

public TelerikNumericTextBox()

Controls whether increment and decrement arrow buttons are displayed for easy numeric value adjustment. When enabled, shows up/down arrow buttons that allow users to modify values by the Step amount. Provides mouse-friendly alternative to keyboard input and ensures values stay within Min and Max bounds. Particularly valuable for precise adjustments, accessibility support, and touch interfaces where typing is cumbersome. Arrow buttons respect the Step value for consistent incremental changes. Default value is "true".

Declaration

[Parameter]
public bool Arrows { get; set; }

Property Value

Sets the HTML autocomplete attribute to control browser autofill behavior for numeric form fields. Use values appropriate for numeric context: "off" to disable, "on" for general numeric fields. For specific use cases, use semantic values like "transaction-amount", "cc-exp-month", or "bday-year". Helps users by enabling smart browser suggestions for common numeric inputs like quantities, prices, or dates. Particularly useful for e-commerce forms, financial applications, or any repetitive numeric data entry. See MDN autocomplete documentation for complete list of values.

Declaration

[Parameter]
public string AutoComplete { get; set; }

Property Value

Sets the delay in milliseconds between user's last keystroke and when the value is updated and events are triggered. Prevents excessive processing during rapid typing while maintaining responsive user experience. Use lower values (50-100ms) for real-time calculations, higher values (200-500ms) for expensive operations like API calls. Balances performance with responsiveness - longer delays reduce CPU usage but may feel less responsive. Essential for scenarios with validation, formatting, or dependent calculations that should not fire on every keystroke. Default value is 150ms, providing good balance for most numeric input scenarios.

Declaration

[Parameter]
public int DebounceDelay { get; set; }

Property Value

Sets the number of decimal places allowed for input values and display formatting. Controls both input precision during typing and the rounding of values for storage and display. Use 0 for integer-only fields, 2 for currency amounts, or higher values for scientific measurements. Works with Format to control display appearance - Decimals affects precision, Format affects presentation. Values are automatically rounded to this precision when entered or when using Arrows for adjustments. Default value is determined by the current culture's number format settings.

Declaration

[Parameter]
public int Decimals { get; set; }

Property Value

Controls the visual fill style of the NumericTextBox input field affecting its background and border appearance. ThemeConstants.NumericTextBox.FillMode.Solid" creates a filled background with high contrast borders for traditional form styling. "ThemeConstants.NumericTextBox.FillMode.Outline" uses transparent background with prominent borders for modern, clean interfaces. "ThemeConstants.NumericTextBox.FillMode.Flat" removes most borders and background for minimal, subtle integration. Choose based on your design language - "solid" for conventional forms, "outline" for contemporary UIs, "flat" for dashboard contexts. Should coordinate with Arrows button styling for visual consistency. Default value is "ThemeConstants.NumericTextBox.FillMode.Solid".

Declaration

[Parameter]
public string FillMode { get; set; }

Property Value

Sets the display format for numeric values when the NumericTextBox is not focused (display mode). Controls visual presentation without affecting the underlying value or input behavior. Use standard .NET format strings: "C" for currency, "P" for percentage, "N2" for numbers with 2 decimals. Examples: "C2" displays $123.45, "P1" shows 12.3%, "N0" shows 1,234, "#,##0.00" for custom formatting. Different from "Decimals" which controls input precision - Format only affects display appearance. When focused, users see the raw numeric value for easy editing regardless of this format.

Declaration

[Parameter]
public string Format { get; set; }

Property Value

Sets the maximum allowed value that users can enter or select in the NumericTextBox. Provides input validation and prevents users from entering values above the specified threshold. Use for business rules like maximum order quantities, percentage caps, or safety limits. Works with Arrows to prevent incrementing above this value and with validation to show errors. Must be greater than or equal to Min value when both are specified. Examples: 100 for percentages, 999999 for practical input limits, or specific business maximums.

Declaration

[Parameter]
public T Max { get; set; }

Property Value

Sets the minimum allowed value that users can enter or select in the NumericTextBox. Provides input validation and prevents users from entering values below the specified threshold. Use for business rules like minimum order quantities, positive-only values, or range validations. Works with Arrows to prevent decrementing below this value and with validation to show errors. Must be less than or equal to Max value when both are specified. Examples: 0 for non-negative numbers, 1 for positive integers, 0.01 for minimum currency amounts.

Declaration

[Parameter]
public T Min { get; set; }

Property Value

Sets custom content to display before the numeric input field as a visual prefix element. Use for currency symbols ("$", "€"), measurement icons, or contextual labels that indicate the numeric value's purpose. Examples: currency indicators for price fields, unit symbols for measurements, or mathematical operators for calculations. Combines with ShowPrefixSeparator to control visual separation from the input area. Different from suffix templates - use prefix for context that precedes the value conceptually. Children: Use any HTML content or Blazor components as prefix content.

Declaration

[Parameter]
public RenderFragment NumericTextBoxPrefixTemplate { get; set; }

Property Value

Sets custom content to display after the numeric input field as a visual suffix element. Use for units of measurement, percentage symbols, or action buttons that relate to the numeric value. Examples: measurement units ("px", "kg", "%", "°C"), calculation buttons, or status indicators for value ranges. Combines with ShowSuffixSeparator to control visual separation from the input area. Different from Arrows which provides increment/decrement functionality and ShowClearButton for clearing. Children: Use any HTML content or Blazor components as suffix content.

Declaration

[Parameter]
public RenderFragment NumericTextBoxSuffixTemplate { get; set; }

Property Value

Sets placeholder text that appears in the NumericTextBox when no value is entered to guide user input. Provides hints about expected numeric format, range, or purpose without taking up additional screen space. Use descriptive text like "Enter price", "0.00", "Quantity (1-100)", or examples of valid formats. Should complement any prefix/suffix templates and be consistent with the expected data type and range. Examples: "0.00" for currency fields, "Enter quantity" for inventory, "%" for percentage inputs. Essential for user guidance especially when Min, Max, or Format impose specific constraints.

Declaration

[Parameter]
public string Placeholder { get; set; }

Property Value

Controls whether the input field can be modified by user typing, while still allowing interaction through other means. When enabled, prevents keyboard input but allows value changes via Arrows, clear button, or programmatic updates. Useful for calculator-style interfaces, controlled environments, or when numeric input should only come from specific sources. Users can still focus the field, use arrows for adjustment, and see formatted values with Format. Different from "TelerikInputBase{T}.Enabled" which disables all interactions including arrows and buttons. Default value is "false".

Declaration

[Parameter]
public bool ReadOnly { get; set; }

Property Value

Controls the corner rounding style of the NumericTextBox input field and arrow buttons for visual consistency. "ThemeConstants.NumericTextBox.Rounded.Small" provides subtle rounded corners for a modern, soft appearance. "ThemeConstants.NumericTextBox.Rounded.Medium" offers moderate rounding suitable for most business applications. "ThemeConstants.NumericTextBox.Rounded.Large" creates prominent rounded corners for friendly, approachable interfaces. "ThemeConstants.NumericTextBox.Rounded.Full" applies maximum rounding for pill-shaped inputs in contemporary designs. Affects both the input field and Arrows buttons to maintain consistent visual design language. Should match other form elements for visual harmony across your application. Default value is "ThemeConstants.NumericTextBox.Rounded.Medium".

Declaration

[Parameter]
public string Rounded { get; set; }

Property Value

Controls whether all content is automatically selected when the NumericTextBox receives focus. When enabled, provides quick editing experience where users can immediately type to replace the entire value. Improves efficiency for frequent value changes, data entry scenarios, or when users typically replace rather than edit values. Particularly useful for calculator-style interfaces, quick data corrections, or form fields where replacement is more common than modification. When disabled, cursor is positioned at the end of existing value for incremental editing. Default value is "false".

Declaration

[Parameter]
public bool SelectOnFocus { get; set; }

Property Value

Controls whether a clear button (X icon) appears at the end of the NumericTextBox input field. When enabled, users can click the clear button to instantly remove the current numeric value and reset to empty state. Improves user experience for quick value removal without manual selection and deletion. Particularly useful for optional numeric fields, filters, or calculator-style inputs where frequent clearing is expected. Default value is "false".

Declaration

[Parameter]
public bool ShowClearButton { get; set; }

Property Value

Controls whether a visual separator line appears between the prefix content and the numeric input field. Creates a clear boundary when using NumericTextBoxPrefixTemplate to prevent visual confusion. Set to "false" when prefix content should blend seamlessly with the input area. Particularly important with currency symbols or unit indicators where separation clarity improves readability. Default value is "true".

Declaration

[Parameter]
public bool ShowPrefixSeparator { get; set; }

Property Value

Controls whether a visual separator line appears between the numeric input field and the suffix content. Creates a clear boundary when using NumericTextBoxSuffixTemplate to prevent visual confusion. Set to "false" when suffix content should blend seamlessly with the input area. Useful when combining measurement units, Arrows, and ShowClearButton for organized layout. Default value is "true".

Declaration

[Parameter]
public bool ShowSuffixSeparator { get; set; }

Property Value

Controls the physical dimensions of the NumericTextBox including height, padding, font size, and arrow button sizing. "ThemeConstants.NumericTextBox.Size.Small" creates compact inputs suitable for dense layouts, data grids, or mobile interfaces. "ThemeConstants.NumericTextBox.Size.Medium" provides standard sizing appropriate for most business forms and general use cases. "ThemeConstants.NumericTextBox.Size.Large" offers prominent inputs ideal for primary actions, accessibility needs, or touch interfaces. Affects both input field and Arrows button sizing for proportional appearance and consistent touch targets. Should be consistent across form elements and consider user accessibility requirements - larger sizes improve interaction areas. Default value is "ThemeConstants.NumericTextBox.Size.Medium".

Declaration

[Parameter]
public string Size { get; set; }

Property Value

Sets the increment/decrement amount used when clicking arrow buttons or using keyboard up/down keys. Determines how much the value changes with each user interaction for precise control over value adjustments. Use small values (0.1, 0.01) for fine-grained control, larger values (10, 100) for quick major adjustments. Examples: 0.01 for currency precise to cents, 1 for whole number counters, 0.5 for ratings, 10 for quantities. Value is automatically rounded if it has more decimal places than the "Decimals" parameter allows. Works with Arrows button functionality and keyboard navigation for consistent user experience.

Declaration

[Parameter]
public T Step { get; set; }

Property Value

Gets the current version of the user input. May be different depending on whether the textbox is focused.

Declaration

public string Text { get; }

Property Value

Sets the width of the NumericTextBox component using CSS length units. Controls the horizontal space the component occupies in your layout. Use specific units like "200px" for fixed width, "50%" for responsive design, or "100%" to fill parent container. Consider Arrows, prefix/suffix templates, and content when setting width to ensure proper fit. Examples: "120px" for compact numeric inputs, "200px" for standard form fields, "100%" for fluid layouts. Should accommodate expected value ranges and any additional UI elements like arrows or templates.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Overrides ComponentBase.BuildRenderTree(RenderTreeBuilder)

Declaration

public override void Dispose()

Overrides TelerikInputBase<T>.Dispose()

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Returns

Overrides BaseComponent.OnAfterRenderAsync(bool)

Declaration

protected override void OnInitialized()

Overrides ComponentBase.OnInitialized()

Declaration

protected override Task OnParametersSetAsync()

Returns

Overrides TelerikInputBase<T>.OnParametersSetAsync()

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Returns

Overrides TelerikInputBase<T>.SetParametersAsync(ParameterView)