Blazor Input Number

Create input fields that let the user enter a number and binds it to a C# property that can accommodate various data types.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component featuresLearn about input component features

Simple input

Value: 10
<BlazorInputNumber @bind-Value="MyNumber" />
<div>Value: @MyNumber</div>

@code {
    public int MyNumber { get; set; } = 10;
}

Input number with parsing messages

Message:
<BlazorInputNumber @bind-Value="MyNumber" UpdateOnHtmlEvent="oninput" ValueParsed="HandleValueParsed" />
<div>Message: @Message</div>

@code {
    public int MyNumber { get; set; } = 10;
    public string Message { get; set; } = "";

    private void HandleValueParsed(ParseEventArgs eventArgs)
    {
        if (eventArgs.ParseSuccess)
        {
            Message = "";
        }
        else
        {
            Message = $"The value you have typed {eventArgs.UserInputValue} is not a valid value for {typeof(int)}";
        }
    }
}

Working with different C# types

Bind to sbyte:
sbyte value: 10
Bind to byte:
byte value: 10
Bind to short:
short value: 10
Bind to ushort:
ushort value: 10
Bind to uint:
uint value: 10
Bind to long:
long value: 10
Bind to ulong:
ulong value: 10
<div>Bind to <code>sbyte</code>:</div>
<BlazorInputNumber @bind-Value="MySByte" UpdateOnHtmlEvent="oninput" />
<div><code>sbyte</code> value: @MySByte</div>

<div>Bind to <code>byte</code>:</div>
<BlazorInputNumber @bind-Value="MyByte" UpdateOnHtmlEvent="oninput" />
<div><code>byte</code> value: @MyByte</div>

<div>Bind to <code>short</code>:</div>
<BlazorInputNumber @bind-Value="MyShort" UpdateOnHtmlEvent="oninput" />
<div><code>short</code> value: @MyShort</div>

<div>Bind to <code>ushort</code>:</div>
<BlazorInputNumber @bind-Value="MyUShort" UpdateOnHtmlEvent="oninput" />
<div><code>ushort</code> value: @MyUShort</div>

<div>Bind to <code>uint</code>:</div>
<BlazorInputNumber @bind-Value="MyUInt" UpdateOnHtmlEvent="oninput" />
<div><code>uint</code> value: @MyUInt</div>

<div>Bind to <code>long</code>:</div>
<BlazorInputNumber @bind-Value="MyLong" UpdateOnHtmlEvent="oninput" />
<div><code>long</code> value: @MyLong</div>

<div>Bind to <code>ulong</code>:</div>
<BlazorInputNumber @bind-Value="MyULong" UpdateOnHtmlEvent="oninput" />
<div><code>ulong</code> value: @MyULong</div>

@code {
    public sbyte MySByte { get; set; } = 10;
    public byte MyByte { get; set; } = 10;
    public short MyShort { get; set; } = 10;
    public ushort MyUShort { get; set; } = 10;
    public uint MyUInt { get; set; } = 10;
    public long MyLong { get; set; } = 10;
    public ulong MyULong { get; set; } = 10;
}
Currently, we don't support binding to C# properties with type nint and nuint. We are planning to support this feature from 7.2.1. See Bug 5: Input type number should accept uint and nunit.

Disabled input:

<BlazorLabel>
    Input a number
    <BlazorInputNumber @bind-Value="..." @bind-disabled="Disabled" />
</BlazorLabel>
<BlazorButton type="button" @onclick="_ => Disabled = !Disabled" Variants="Disabled?new[] {BaseVariants.Success}:new[] {BaseVariants.Danger}">@(Disabled ? "Enable" : "Disable")</BlazorButton>

@code {
    public bool Disabled { get; set; } = true;
}

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorFormControl form-control
BlazorFormControl.invalid border-danger
BlazorFormControl.valid border-success

Parameters

BlazorInputNumber

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
Value int, sbyte, byte, short, ushort, uint, long, ulong The value of the input.
UpdateOnHtmlEvent string This parameter allows you to specify which HTML event should trigger a re-render or update of the component. When the specified event occurs on the input element, the component will initiate the parsing process, updating its internal value to reflect the UI input. Default event is onchange.
ValueParsed EventCallback<ParseEventArgs> Specify an action or method to be executed when the component parses a value, whether the parsing operation succeeds or fails.
FieldState FieldState Represents the state of a field or input element within the component. Can be used to track and manage the state of the field and display relevant messages to the user.
ParseValueHandler Func<string?, TValue?> Implement specialized parsing logic for the component, such as handling user input, converting strings to specific data types, which corresponds to the type of the Value parameter in the component and performing validation during the parsing process.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙