Blazor Toolkit

Blazor Toolkit Numeric Textbox Component

Add the Numeric Textbox component in application as shown in below code example.

One-Way Binding

Bind the value using the Value parameter (no two-way sync). Updating the backing field programmatically reflects in the UI.

Value: 25
Two-Way Binding

Use bind-Value for two-way synchronization between the component and the bound field.

Value: 10
Percentage Format

Apply Format="P2" to display the value as a percentage when unfocused; underlying value remains numeric.

Raw value: 0.5
Currency Format

Use Format="C2" to render a currency using the current culture’s currency symbol and separators.

Raw value: 12500.50
Custom Format (# And 0)

Combine # (optional digit) and 0 (zero placeholder) to build custom display patterns such as ###.## and 000.00.

Values: 10.5
Values: 10.5
Native Events (OnKeyPress)

Attach native DOM events directly on the component. This example logs the last key pressed via onkeypress.

Last key:
Events

Wire component events such as Created, Focus, Blur, ValueChange.

Value: 30

Event:

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.