Default Theme

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

Int test

Example int: 2147483647

Long test

Example long: 638672628648660527

Short test (unbound)

Float test (OnChange)

Example float: 3.4028235E+38

Double test

Example double: 1.7976931348623157E+308

Decimal test

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

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