Number Formats in NumericTextBox Control

7 Jun 20241 minute to read

You can format the value of NumericTextBox using format property. The value will be displayed in the specified format when the control is in focused out state. The format string supports both the standard numeric format string and custom numeric format string.

Standard formats

From the standard numeric format, you can use the numeric related format specifiers such as n,p and c in the NumericTextBox control. By using these format specifiers, you can achieve the percentage and currency textbox behavior also.

The below example demonstrates percentage and currency formats.

<div id='container'>
    <div class='wrap'>
        @Html.EJS().NumericTextBox("percent").Format("p2").Value(0.5).Min(0).Max(1).Step(0.01).Placeholder("Percentage format").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()
    </div>
    <div class='wrap'>
        @Html.EJS().NumericTextBox("currency").Format("c2").Value(10).Placeholder("Currency format").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()
    </div>
</div>
public ActionResult Standard()
{
    return View();
}

Output be like the below.

NumericTextBox Sample

Custom formats

From the custom numeric format string, you can provide any custom format by combining one or more custom specifiers.

The below examples demonstrate format the value by using currency format string # and 0.

<div id='container'>
    <div class='wrap'>
        @Html.EJS().NumericTextBox("numeric").Format("###.##").Value(10).Placeholder("Custom format string #").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()
    </div>
    <div class='wrap'>
        @Html.EJS().NumericTextBox("numeric1").Format("000.00").Value(10).Placeholder("Custom format string 0").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()
    </div>
</div>
public ActionResult Custom()
{
    return View();
}

Output be like the below.

NumericTextBox Sample