Numeric Field - Fod.DemoPage

Quick Start

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

Default (culture-aware)

Amount

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

Value: 123.45

With adornments

Length

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)

Monthly cost

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

Value: 2,500.75

Comma separator (ro-RO)

Cost lunar

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

Value: 2.500,75

Hide native spin buttons

Rate

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

Seats

Negative numbers are blocked.

Value: 0

Integer only (no decimals)

Quantity

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

Tickets

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

Budget (readonly)

Reference only.

Disabled

Budget (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.