Blazor NumericTextBox - Overview

Configurator

Debounce Delay

  • Overview.razor
Loading the demo source code...please wait.
blazor ui ninja image

The NumericTextBox component is part of Telerik UI for Blazor, a professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Description

The Telerik UI for Blazor NumericTextBox is optimized specifically for entering decimal values. It accepts only numeric values, includes specific features for numbers and does not allow text entry. You can also control minimum and maximum values, numeric formats, placeholders, steps and other elements of the UX.

Some of the popular features include:

  • Events: Access the OnChange, ValueChanged and OnBlur events to customize behavior.
  • Validation: Enable built-in or custom validation of the user input.
  • Custom Format Strings: Define your own numeric formats.
  • Arrows: Enable (default) or disable the field’s spinner arrows that increment or decrement values.
  • Debounce Delay: Time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and the number of database queries.
  • Decimals: Set the number of allowed decimal places.
  • Format: Specify one of the standard .NET number formats.
  • Max/Min: Set value boundaries.
  • Placeholder: Show a hint or initial value.
  • Step: Determine the number by which the value increments or decrements when a spinner arrow is clicked.
  • Globalization: Culture settings can dictate what numeric symbols are used.
  • Keyboard Navigation: Allow users to interact with the component via keyboard shortcuts.

The Blazor NumericTextBox example above shows various implementations of numeric formats, decimal settings, step settings, min/max values and spinner controls. View the source code to get ideas on how to implement your own.

This NumericTextBox Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.
Reload