NumericTextField

Overview

Number text fields (NumericTextField) give people a way to enter and edit numbers (int, long, short, double, float, decimal). They’re used in forms, modal dialogs, tables, and other surfaces where number input is required.

Usage

These <NumericTextField> components can be used both within and without <EditForm> block but you don't get validation messages when you don't put them in an <EditForm>

TextFieldNumbers without EditForm
Example int: 2147483647
Example long: 638668154060145778
Example float: 3.4028235E+38
Example double: 1.7976931348623157E+308
Example decimal: 0.3333333333333333333333333333
<div class="textFieldDiv">
    <NumericTextField Label="Int test" @bind-Value="model.exampleInt" @bind-Value:event="OnChange" />
</div>
Example int: @model.exampleInt
<div class="textFieldDiv">
    <NumericTextField Label="Long test" @bind-Value="model.exampleLong" />
</div>
Example long: @model.exampleLong
<div class="textFieldDiv">
    <NumericTextField Label="Short test (unbound)" Value="Int16.MinValue" />
</div>
<div class="textFieldDiv">
    <NumericTextField Label="Float test (OnChange)" @bind-Value="@model.exampleFloat" @bind-Value:event="OnChange" />
    Example float: @model.exampleFloat
</div>
<div class="textFieldDiv">
    <NumericTextField Label="Double test" @bind-Value="@model.exampleDouble" />
    Example double: @model.exampleDouble
</div>
<div class="textFieldDiv">
    <NumericTextField Label="Decimal test" @bind-Value="@model.exampleDecimal" />
    Example decimal: @model.exampleDecimal
</div>
            
            
TextFieldNumbers with EditForm
Example int: 2147483647
Example long: 638668154060145778
Example float: 3.4028235E+38
Example double: 1.7976931348623157E+308
Example decimal: 0.3333333333333333333333333333
<EditForm Model=@model OnValidSubmit=@HandleValidSubmit>
<FluentUIValidationSummary />
<div class="textFieldDiv">
    <NumericTextField Label="Int test" @bind-Value="model.exampleInt" @bind-Value:event="OnChange" />
</div>
Example int: @model.exampleInt
<div class="textFieldDiv">
    <NumericTextField Label="Long test" @bind-Value="model.exampleLong" />
</div>
Example long: @model.exampleLong
<div class="textFieldDiv">
    <NumericTextField TValue="short" Label="Short test (unbound)" Value="Int16.MinValue" />
</div>
<div class="textFieldDiv">
    <NumericTextField Label="Float test (OnChange)" @bind-Value="@model.exampleFloat" @bind-Value:event="OnChange" />
    Example float: @model.exampleFloat
</div>
<div class="textFieldDiv">
    <NumericTextField Label="Double test" @bind-Value="@model.exampleDouble" />
    Example double: @model.exampleDouble
</div>
<div class="textFieldDiv">
    <NumericTextField Label="Decimal test" @bind-Value="@model.exampleDecimal" />
    Example decimal: @model.exampleDecimal
</div>
</EditForm>