MudBlazor

Numeric Field

Numeric field components are used for receiving user provided numbers.

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.

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="IntValue" Label="Standard" Variant="Variant.Text" Min="0" Max="10" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="DoubleValue" Label="Filled" Variant="Variant.Filled" Min="0.0" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="DecimalValue" Label="Outlined" Variant="Variant.Outlined" Step=".2M" />
    </MudItem>
</MudGrid>
@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.

Kg

Weight

Kg

Weight

Kg

Weight

<MudGrid>
	<MudItem xs="12" sm="6" md="4">
		<MudNumericField @bind-Value="Amount" Label="Amount" Variant="Variant.Text" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" HideSpinButtons="true" />
	</MudItem>
	<MudItem xs="12" sm="6" md="4">
		<MudNumericField @bind-Value="Amount" Label="Amount" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" HideSpinButtons="true" />
	</MudItem>
	<MudItem xs="12" sm="6" md="4">
		<MudNumericField @bind-Value="Amount" Label="Amount" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" HideSpinButtons="true" />
	</MudItem>
	<MudItem xs="12" sm="6" md="4">
		<MudNumericField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Text" Adornment="Adornment.End" AdornmentText="Kg" HideSpinButtons="true" />
	</MudItem>
	<MudItem xs="12" sm="6" md="4">
		<MudNumericField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Filled" Adornment="Adornment.End" AdornmentText="Kg" HideSpinButtons="true" />
	</MudItem>
	<MudItem xs="12" sm="6" md="4">
		<MudNumericField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentText="Kg" HideSpinButtons="true" />
	</MudItem>
</MudGrid>
@code {
	public decimal? Amount { get; set; }
	public float? Weight { 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.

Value: 1234.56

Value: 1234.56

@using System.Globalization


<MudGrid>
    <MudItem xs="12" sm="6">
        <MudNumericField T="double?" @bind-Value="_valueDe" Immediate="true" Label="de-DE" Format="N2" Culture="@_de"/>
        <MudText>Value: @_valueDe.ToString()</MudText>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudNumericField T="double?" @bind-Value="_valueEn" Immediate="true" Label="en-US" Format="N2" Culture="@_en"/>
        <MudText>Value: @_valueEn.ToString()</MudText>
    </MudItem>
</MudGrid>
@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;
}

Binding Value Types vs Nullables

When you bind value types, the numeric field will not be empty even if the user hasn't entered a value yet because a value type always has a value, even when unassigned. The two-way-bindable Value property will automatically assume the default value of that type (i.e. 0 for int).
Thus, if you want your numeric fields to be empty, as long as nothing has been entered yet or after the field has been cleared, use the nullable version of that type (i.e. int?).
Do not assign null values to Min, Max and Step.

Enter an int

Enter a double

<MudGrid>
    <MudItem xs="12" sm="6">
        <MudNumericField @bind-Value="intValue" Label="Enter an int" />
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudNumericField @bind-Value="doubleValue" Label="Enter a double" Format="F1" />
    </MudItem>
</MudGrid>
<MudGrid>
    <MudItem xs="12" sm="6">
        <MudNumericField @bind-Value="nullableInt" HelperText="Enter an int" />
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudNumericField @bind-Value="nullableDouble" HelperText="Enter a double" Format="F1" />
    </MudItem>
</MudGrid>
@code { 
    int intValue;
    double doubleValue;
    int? nullableInt;
    double? nullableDouble;
}

Normal vs Immediate vs Debounced

By default, MudNumericField updates the bound value on Enter or when it loses focus. Set Immediate="true" to update the value whenever the user types.
You can also set the DebounceInterval parameter to the number of milliseconds you want to wait before updating the bound value. If you need to know when the interval elapses, you can pass an OnDebounceIntervalElapsed EventCallback. Notice how in this example the debounced text only updates 500 ms after you stop typing.

Normal: 0

Immediate: 0

Debounced: 0

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="@_normal"
                         Label="Normal"
                         Variant="Variant.Outlined" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="@_immediate"
                         Label="Immediate"
                         Variant="Variant.Outlined"
                         Adornment="Adornment.End"
                         Immediate="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="@_debounced"
                      Label="Debounced"
                      Variant="Variant.Outlined"
                      Adornment="Adornment.End"
                      DebounceInterval="500"
                      OnDebounceIntervalElapsed="HandleIntervalElapsed" />
    </MudItem>
</MudGrid>
<div class="mt-3">
    <MudText>Normal: @_normal</MudText>
    <MudText>Immediate: @_immediate</MudText>
    <MudText>Debounced: @_debounced</MudText>
</div>
@code {
    double _normal;
    double _immediate;
    double _debounced;

    void HandleIntervalElapsed(string debouncedText)
    {
        // at this stage, interval has elapsed
        //Notice that debouncedText is string, not a number
    }
}

Change the Value with the Mouse Wheel

You can change MudNumericField's value (by step) with Shift + MouseWheel. You can also set the InvertMouseWheel parameter to reverse the mouse wheel up and down event.

<MudGrid>
    <MudItem xs="12" Class="d-flex justify-center">
        <MudNumericField @bind-Value="@_normal" InvertMouseWheel="@_invertMouseWheel"
                         Label="Use Shift + Mouse Wheel"
                         Variant="Variant.Outlined" />
    </MudItem>
</MudGrid>
<div class="mt-3">
    <MudCheckBox @bind-Checked="@_invertMouseWheel" Label="Revert Mouse Wheel" Color="Color.Primary" />
</div>
@code {
    double _normal = 0;
    bool _invertMouseWheel = false;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙