Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Numeric Field

Numeric field components are used for receiving user provided numbers.

See Numeric Field API for parameter documentation.

Basic Numeric Field's

Numeric fields are just like text fields, but they work well with numeric value 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 they assume the default value for the type (i.e -2147483648 and 2147483647 for int). The Step attribute define how much the value changes when using the up/down buttons on the right, or with keyboards up/down arrows. If not specified, default value is 1.

Note: for floating point or decimal values, passing a literal string value for Min, Max or Step might trigger a compile error on generated razor code. You can either force decimal points (i.e. 0.0) or suffix (i.e. 0.5M for decimal).

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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; }
}

Dense

With the margin prop you can reduce the field height.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Value" Label="Standard" Variant="Variant.Text" Margin="Margin.Dense" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Value" Label="Filled" Variant="Variant.Filled" Margin="Margin.Dense" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Value" Label="Outlined" Variant="Variant.Outlined" Margin="Margin.Dense" />
    </MudItem>
</MudGrid>
@code {
    public int Value { get; set; }
}

Form Props

Required, Disabled, Type, HelperText

Some helping Text

Some helping Text

Some helping Text

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Helper" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Text" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Text" Disabled="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Text" />
    </MudItem>

    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Helper" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Filled" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Filled" Disabled="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Filled" />
    </MudItem>

    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Helper" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Outlined" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Outlined" Disabled="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Outlined" />
    </MudItem>
</MudGrid>
@code {
    public int? Helper { get; set; }
    public int Disabled { get; set; } = 2020;
    public int ReadOnly { get; set; } = 101;
}

Adornments

This can be used to add a prefix or a suffix. Text, Icon or Icon Button.

Kr

Kg

Weight

Kg

Weight

Kg

Weight

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="12" md="12">
        <MudNumericField @bind-Value="Amount" Label="Amount" Variant="Variant.Text" Adornment="Adornment.Start" AdornmentText="Kr" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Amount" Label="Amount" Variant="Variant.Text" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Text" Adornment="Adornment.End" AdornmentText="Kg" />
    </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" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Filled" Adornment="Adornment.End" AdornmentText="Kg" />
    </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" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudNumericField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentText="Kg" />
    </MudItem>
</MudGrid>
@code {
    public decimal? Amount { get; set; }
    public float? Weight { get; set; }
}

Hide Spin Buttons

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

Kg

Weight

Kg

Weight

Kg

Weight

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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; }
}

Adornment Color

The color of the adornment can be changed separately from the NumericField.

Kg

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6">
        <MudNumericField @bind-Value="Amount" Label="Amount" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" AdornmentColor="Color.Warning" />
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudNumericField @bind-Value="Weight" Label="Weight" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentText="Kg" AdornmentColor="Color.Info" />
    </MudItem>
</MudGrid>
@code {
    public decimal? Amount { get; set; }
    public float? Weight { get; set; }
}

Binding Properties of a POCO

The following text fields are bound against the properties of a POCO (Plain old C-Sharp Object). Edit them to see the model change. Reset the model and see the NumericFields change.

Note: always use two-way bindings (@bind-Value) with number fields.

Name: Hydrogen

Mass: 1.00794 u

Electrons: 1

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6">
        <MudNumericField @bind-Value="@element.Mass" Label="Mass" HideSpinButtons="true"/>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudNumericField @bind-Value="@element.Electrons" Label="Electrons" Min="1" />
    </MudItem>
</MudGrid>
<div class="mt-3 ml-0 d-flex">
    <div>
        <MudText>Name: @element.Name</MudText>
        <MudText>Mass: @element.Mass u</MudText>
        <MudText>Electrons: @element.Electrons</MudText>
    </div>
    <div class="d-flex ml-auto align-center">
        <MudButton Variant="Variant.Filled" OnClick="Reset">Reset Model</MudButton>
    </div>
</div>
@code {
    Atom element = new Atom { Name = "Hydrogen", Mass = 1.00794, Electrons = 1 };

    // A typical POCO
    public class Atom
    {
        public string Name { get; set; }
        public double Mass { get; set; }
        public int Electrons { get; set; }
    }

    private void Reset()
    {
        element = new Atom { Name = "Hydrogen", Mass = 1.00794, Electrons = 1 };
        StateHasChanged();
    }

}

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).
So if you want your numeric fields to be empty as long as nothing has been entered yet or it has been deleted, 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

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Per default, MudNumericField updates the bound value on Enter or when it looses focus. Set Immediate="true" to update the value whenever the user types.
You can also set the DebounceInterval parameter to the amount of milliseconds you want to await 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.

Warning: when Immediate="false" (default), if the user types a value and then presses the arrow up/down on the keyboard, the step is calculated on the last accepted value.

Normal: 0

Immediate: 0

Debounced: 0

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 {
    int _normal;
    int _immediate;
    int _debounced;

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

Focus

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12">
        <MudNumericField @ref="intReference" Label="Manual focus" Variant="Variant.Filled" @bind-Value="@intValue" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => intReference.FocusAsync()">
            Focus
        </MudButton>
    </MudItem>
    <MudItem xs="12">
        <MudNumericField @ref="doubleReference" Label="Manual focus" Variant="Variant.Filled" @bind-Value="@doubleValue" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => doubleReference.FocusAsync()">
            Focus
        </MudButton>
    </MudItem>
</MudGrid>
@code
{
    private MudNumericField<int> intReference;
    private MudNumericField<double> doubleReference;

    int intValue = 100;
    double doubleValue = Math.PI;
}

Select

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12">
        <MudNumericField @ref="doubleReference" Label="Select" Variant="Variant.Filled" @bind-Value="@value" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => doubleReference.SelectAsync()">
            Select
        </MudButton>
    </MudItem>
</MudGrid>
@code
{
    private MudNumericField<double> doubleReference;

    double value = Math.PI;
}

Inputs

Error text.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
	<MudItem xs="12" sm="6" md="3">
		<MudNumericField T="double" Label="Basic Input" />
	</MudItem>
	<MudItem xs="12" sm="6" md="3">
		<MudNumericField T="int?" Placeholder="Placeholder" />
	</MudItem>
	<MudItem xs="12" sm="6" md="3">
		<MudNumericField Value="0" Label="Disabled" Disabled="true" />
	</MudItem>
	<MudItem xs="12" sm="6" md="3">
		<MudNumericField Value="2" Label="Error" Error="true" ErrorText="Error text." />
	</MudItem>
</MudGrid>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙