Blazor NumericTextBox - Overview
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
My Profile
- Overview.razor
- MyProfileTemplate.razor
The NumericTextBox component is part of Telerik UI for Blazor, a professional grade UI library with 110+ 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.