Numeric Field

Culture-aware number entry with bounds, precision, keyboard adjustments, and optional adornments. Built on top of the shared FOD input foundation with full support for generic numeric types.

Quick Start

Basic FodNumericField with culture-aware parsing, bounds clamping, and adornments.

Default (culture-aware)

Use locale separators; clamped between 0 and 10,000.
Value: 123.45

With adornments

No decimals; increments of 5; clamped at 500.
Value: 150
razor
<FodNumericField T="decimal"
                 Label="Amount"
                 Min="0m"
                 Max="10000m"
                 Step="0.25m"
                 Precision="2"
                 @bind-Value="_amount" />

Formatting & Units

Currency formatting with prefix/suffix units and custom number formats.

Dot separator (en-US)

en-US: decimal dot, thousands comma. e.g. 2,500.75
Value: 2,500.75

Comma separator (ro-RO)

ro-RO: decimal virgulă, mii punct. ex. 2.500,75
Value: 2.500,75

Hide native spin buttons

Spin buttons hidden; still supports keyboard arrows/PageUp/PageDown.
Value: 1.25
razor
<FodNumericField T="decimal"
                 Label="Monthly cost"
                 Prefix="$"
                 Suffix="USD"
                 Format="N2"
                 Culture="@CultureInfo.GetCultureInfo("en-US")"
                 @bind-Value="_currencyEnUs" />

<FodNumericField T="decimal"
                 Label="Cost lunar"
                 Prefix="Lei"
                 Format="N2"
                 Culture="@CultureInfo.GetCultureInfo("ro-RO")"
                 @bind-Value="_currencyRoRo" />

Policies & Validation

Control negative values, decimal input, and integer-only modes.

No negatives

Negative numbers are blocked.
Value: 0

Integer only (no decimals)

Fractions are rejected; increments by 5.
Value: 20
razor
<FodNumericField T="int"
                 Label="Seats"
                 AllowNegative="false"
                 Precision="0"
                 @bind-Value="_seats" />

Keyboard & Wheel

Arrow keys step by 1, PageUp/PageDown by PageStepFactor, Home/End jump to bounds.

Arrow/Page/Home/End support

Use keyboard to adjust quickly; wheel disabled by default.
Value: 3

Keyboard controls:

  • Arrow Up/Down - Step by 1
  • Page Up/Down - Step by PageStepFactor (5)
  • Home - Jump to Max value
  • End - Jump to Min value
razor
<FodNumericField T="int"
                 Label="Tickets"
                 Min="0"
                 Max="50"
                 Step="1"
                 PageStepFactor="5"
                 EnableMouseWheel="false"
                 @bind-Value="_tickets" />

Disabled & Readonly

Non-interactive states still show helper text and formatting.

Readonly

Reference only.

Disabled

Disabled state preview.
razor
<FodNumericField T="decimal"
                 Label="Budget (readonly)"
                 Value="999.99m"
                 ReadOnly="true"
                 Precision="2" />

RTL & Internationalization

FodNumericField supports right-to-left languages with proper text alignment.

Arabic Locale (RTL)

أدخل المبلغ بالدرهم

RTL considerations:

  • Labels and helper text align to logical start (right in RTL)
  • Prefix/suffix adornments mirror via padding-inline
  • Steppers and clear controls maintain logical positioning
razor
<div dir="rtl" lang="ar">
  <FodNumericField T="decimal"
                   Label="المبلغ"
                   Suffix="درهم"
                   @bind-Value="_amount" />
</div>

Accessibility & Best Practices

FodNumericField follows accessibility best practices with proper ARIA attributes.

  • Labels pair with id/for; helper/error text linked via aria-describedby
  • aria-invalid turns true when validation fails; required state uses aria-required
  • inputmode auto-selects "decimal" or "numeric" for mobile keyboards
  • Native min, max, step attributes set on the input element
  • Keyboard navigation: Arrow Up/Down steps, Page Up/Down for larger steps, Home/End for bounds
  • Blur flushes pending debounce to keep values and validation in sync
razor
<FodNumericField T="decimal"
                 Label="Amount"
                 Required="true"
                 Min="0m"
                 Max="1000m"
                 HelperText="Required field" />

API Reference

FodNumericField component properties and their descriptions.

No properties defined.

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 reload the page.