MudBlazor - Blazor Component Library

Basic Numeric Fields

Numeric fields are just like text fields but work well with numeric values of any type. The input is automatically restricted to numeric values and it works regardless of the browser locale settings for decimal types.
Min and Max attributes allow to restrict the value within the limits. If they are not specified, the full value range for the type (i.e -2147483648 and 2147483647 for int) is permitted. The Step attribute defines how much the value changes when using the up/down buttons on the right, or with the up/down keys on the keyboard. If not specified, the default value is 1.

Note: for floating point or decimal values, passing a string literal for Min, Max or Step might trigger a compilation error in the generated Razor code. You can either add a decimal point (i.e. 0.0) or suffix (i.e. 0.5M for decimal).

Note: check out MudTextField for examples regarding Adornments, Usage in a Form, Select and Focus etc.

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; }
}

Hide Spin Buttons

This property can be set to hide the spinner buttons, preventing the user to increase and decrease the value by mouse or touch input.
It can still be changed with the keyboard up/down keys, or manually.

Standard

Filled

Outlined

<MudNumericField HideSpinButtons="true" @bind-Value="IntValue" Label="Standard" Variant="Variant.Text" Min="0" Max="10" />
<MudNumericField HideSpinButtons="true" @bind-Value="DoubleValue" Label="Filled" Variant="Variant.Filled" Min="0.0" />
<MudNumericField HideSpinButtons="true" @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; }
}

Setting Culture and Format

You can set a custom culture and format which will be used for parsing the numeric value from the input string as well as for presentation.

de-DE

1234.56

en-US

1234.56

@using System.Globalization

<MudNumericField Immediate="false" Label="de-DE" Format="N2" Culture="@_de" T="double?" @bind-Value="_valueDe" HelperText="@_valueDe.ToString()"/>
<MudNumericField Immediate="false" Label="en-US" Format="N2" Culture="@_en" T="double?" @bind-Value="_valueEn" HelperText="@_valueEn.ToString()"/>

@code {
    public CultureInfo _de = CultureInfo.GetCultureInfo("de-DE");
    public CultureInfo _en = CultureInfo.GetCultureInfo("en-US");

    public double? _valueDe = 1234.56;
    public double? _valueEn = 1234.56;
}

Numeric Field

API

Basic Numeric Fields

Hide Spin Buttons

Setting Culture and Format