Forms

TwNumeric

TwNumeric is a Blazor number input component. Bind any numeric type, set Min, Max and Step, format by culture, and add a prefix, suffix or clear button.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Bind Value with @bind-Value. The field is a TwTextfield with the spinbutton role, so screen readers announce its value and limits. Use the − and + buttons, Arrow Up and Arrow Down, or the mouse wheel while it has focus, to step the value.

Quantity

Quantity: 1

RAZOR

<TwNumeric Label="Quantity" @bind-Value="quantity" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Quantity: <strong>@quantity</strong></p>

CSHARP

@code {
    private int quantity = 1;
}

Numeric types

T can be any built-in integer type, decimal, double or float. Integer types only accept whole numbers, and the mobile keyboard matches: a number pad for integers, and one with a decimal separator otherwise.

Seats (int)

Weight (decimal)

Ratio (double)

RAZOR

<div class="grid gap-4 sm:grid-cols-3">
    <TwNumeric T="int" Label="Seats (int)" @bind-Value="seats" />
    <TwNumeric T="decimal" Label="Weight (decimal)" Step="0.1m" @bind-Value="weight" />
    <TwNumeric T="double" Label="Ratio (double)" Step="0.05" @bind-Value="ratio" />
</div>

CSHARP

@code {
    private int seats = 2;
    private decimal weight = 1.5m;
    private double ratio = 0.25;
}

Min, max and step

Min and Max limit the value: a typed value outside them is moved to the nearest limit, stepping stops at them, and the − or + button is disabled once it is reached. Step sets how far one step goes, and Page Up and Page Down take ten steps at once.

Guests (1 to 8)

Volume (steps of 5)

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwNumeric T="int" Label="Guests (1 to 8)" Min="1" Max="8" @bind-Value="guests" />
    <TwNumeric T="int" Label="Volume (steps of 5)" Min="0" Max="100" Step="5" @bind-Value="volume" />
</div>

CSHARP

@code {
    private int guests = 2;
    private int volume = 50;
}

Formatting and culture

Set Format to any .NET numeric format string, such as N2 for two decimal places with thousands separators. The text is tidied into that format when it is committed. Typed text is parsed in Culture, which defaults to the culture set through options.Localization.

Budget (N2)

Budget (German)

Value: 1250

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwNumeric T="decimal" Label="Budget (N2)" Format="N2" Step="100m" @bind-Value="budget" />
    <TwNumeric T="decimal" Label="Budget (German)" Format="N2" Step="100m" Culture="@_german" @bind-Value="budget" />
</div>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@budget.ToString(CultureInfo.InvariantCulture)</strong></p>

CSHARP

@code {
    private decimal budget = 1250m;
    private readonly CultureInfo _german = CultureInfo.GetCultureInfo("de-DE");
}

Prefix and suffix

Use Prefix and Suffix to show a currency symbol or a unit inside the field. They are not part of the value, and screen readers hear them with it through aria-valuetext, such as "£12.50" or "75 kg".

Price

Weight

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwNumeric T="decimal" Label="Price" Prefix="£" Format="N2" Step="0.5m" Min="0m" @bind-Value="price" />
    <TwNumeric T="int" Label="Weight" Suffix="kg" Min="0" Max="300" @bind-Value="bodyWeight" />
</div>

CSHARP

@code {
    private decimal price = 12.5m;
    private int bodyWeight = 75;
}

Nullable and clearable

Use a nullable T, such as int?, to let the field be left empty: emptying it sets the value to null. Clearable shows the textfield's clear button, disabled while the field is empty so the buttons never shift under the pointer. Clearing a non-nullable value sets it to zero, kept within Min and Max.

Optional age

Discount

Age: null

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwNumeric T="int?" Label="Optional age" Placeholder="Not given" Min="0" Max="130" Clearable @bind-Value="age" />
    <TwNumeric T="decimal" Label="Discount" Suffix="%" Min="0m" Max="100m" Clearable @bind-Value="discount" />
</div>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Age: <strong>@(age?.ToString() ?? "null")</strong></p>

CSHARP

@code {
    private int? age;
    private decimal discount = 10m;
}

Spin buttons and mouse wheel

Set HideSpinButtons to hide the − and + buttons; the keys and wheel still step the value. While the field has focus the mouse wheel steps it: scrolling up increases it, or decreases it with InvertMouseWheel. Set DisableMouseWheel to let the wheel scroll the page instead.

No buttons

Inverted wheel

Wheel disabled

RAZOR

<div class="grid gap-4 sm:grid-cols-3">
    <TwNumeric T="int" Label="No buttons" HideSpinButtons @bind-Value="spinValue" />
    <TwNumeric T="int" Label="Inverted wheel" InvertMouseWheel @bind-Value="spinValue" />
    <TwNumeric T="int" Label="Wheel disabled" DisableMouseWheel @bind-Value="spinValue" />
</div>

CSHARP

@code {
    private int spinValue = 3;
}

Update on input

Typed text is committed when the field loses focus or Enter is pressed. Set BindEvent="oninput" to update the value on every keystroke instead. Text that is not a number is only flagged once the user leaves the field.

Live total

Total: 0

RAZOR

<TwNumeric T="int" Label="Live total" BindEvent="oninput" @bind-Value="liveTotal" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Total: <strong>@liveTotal</strong></p>

CSHARP

@code {
    private int liveTotal;
}

Allowed characters

Keys that cannot be part of a number are ignored: by default the digits, the culture's separators and, while Min is below zero, the minus sign. Set Pattern to a regular expression each typed character must match. Pasted text is parsed instead, and flagged when it is not a number.

PIN digits only

Variants and dense

Variant and Dense work exactly as they do on TwTextfield, so a numeric field lines up with the other inputs.

Default

Outlined

Filled

RAZOR

<div class="grid gap-4 sm:grid-cols-3">
    <TwNumeric T="int" Label="Default" Variant="InputVariant.Default" @bind-Value="variantValue" />
    <TwNumeric T="int" Label="Outlined" Variant="InputVariant.Outlined" @bind-Value="variantValue" />
    <TwNumeric T="int" Label="Filled" Variant="InputVariant.Filled" Dense @bind-Value="variantValue" />
</div>

CSHARP

@code {
    private int variantValue = 7;
}

Disabled and readonly

Disabled dims the field and its buttons. ReadOnly keeps the value readable and focusable, but it cannot be stepped or typed over.

Disabled

Readonly

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwNumeric T="int" Label="Disabled" Value="12" Disabled />
    <TwNumeric T="int" Label="Readonly" Value="12" ReadOnly />
</div>

Validation

Validation works as it does on TwTextfield: pass a Validator that returns an error message, or null when the value is valid, or set Invalid and ErrorMessage yourself. Text that is not a number shows "Enter a valid number." The message is tied to the field with aria-describedby, so screen readers read it with the field.

Even number

Tickets

You can buy up to 4 tickets.

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwNumeric T="int?" Label="Even number" Required Validator="ValidateEven" @bind-Value="evenNumber" />
    <TwNumeric T="int" Label="Tickets" Invalid="@(tickets > 4)" ErrorMessage="You can buy up to 4 tickets." @bind-Value="tickets" />
</div>

CSHARP

@code {
    private int? evenNumber;
    private int tickets = 5;
    
    private static Task<string?> ValidateEven(int? value) =>
        Task.FromResult<string?>(value is int number && number % 2 != 0 ? "Enter an even number." : null);
}

A numeric field is a text input with the spinbutton role, so screen readers announce its value and limits. Its clear, decrease and increase buttons are not Tab stops, because the keys below do the same job.

Key	What it does
`Tab` or `Shift` plus `Tab`	Moves focus into or out of the field.
`Arrow Up` or `Arrow Down`	Increases or decreases the value by one step, stopping at Max or Min.
`Pg.Up` or `Pg.Down`	Increases or decreases the value by ten steps.
`Enter`	Commits the typed value, when the field binds on change.
`Arrow Left` or `Arrow Right` or `Home` or `End`	Moves the caret through the text.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwNumericTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Adornment`	string
`Button`	string
`ButtonIcon`	string

Full reference: TwNumericTheme on the API docs.

TwNumeric

Basic usage

Numeric types

Min, max and step

Formatting and culture

Prefix and suffix

Nullable and clearable

Spin buttons and mouse wheel

Update on input

Allowed characters

Variants and dense

Disabled and readonly

Validation

Keyboard navigation

Theme configuration