Numeric Field

Basic Usage

Numeric fields are specialized input controls designed for collecting numeric values of any type. Built on the foundation of fields, they automatically restrict input to valid numbers and provide intuitive controls for incrementing and decrementing values. Use Min and Max to set boundaries, and Step to control increment amounts.

Standard

Filled

Outlined

<MudNumericField @bind-Value="IntValue" Label="Standard" Variant="Variant.Text" Min="0" Max="10" />
<MudNumericField @bind-Value="DoubleValue" Label="Filled" Variant="Variant.Filled" Min="0.0" />
<MudNumericField @bind-Value="DecimalValue" Label="Outlined" Variant="Variant.Outlined" Step=".2M" />

@code {
    public int IntValue { get; set; }
    public double DoubleValue { get; set; }
    public decimal DecimalValue { get; set; }
}

Default Input Behavior: Numeric fields use a language-neutral format by default:

Decimal Separator: Always uses a dot (.) regardless of culture
Thousands Separator: Not supported by default
Input Format: [-]digits[.digits] format

Use Culture and Format properties for localized input.

For advanced features like adornments, validation, and form integration, see the TextField documentation which shares the same underlying capabilities.

Common Properties

Control the most frequently used properties to customize the behavior and appearance of numeric fields.

Data Binding

Numeric fields support different data binding patterns depending on your requirements for default values and empty states.

API

Basic Usage

Common Properties

Data Binding