Class TwNumeric<T>

Namespace

TwBlazor.Components

Assembly

TwBlazor.dll

Represents a field for entering a number, with decrease and increase buttons, keyboard and mouse wheel stepping, and optional limits, formatting, prefix and suffix.

public class TwNumeric<T> : TwBlazorTextInputComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, ITwInputComponent, IAsyncDisposable

Type Parameters

T

The type of the value: int, long, short, sbyte, uint, ulong, ushort, byte, decimal, double or float, or the nullable form of one to let the field be left empty.

Inheritance

object

ComponentBase

TwBlazorComponentBase

TwBlazorInputComponentBase

TwBlazorTextInputComponentBase

TwNumeric<T>

Implements

IComponent

IHandleEvent

IHandleAfterRender

ITwComponent

ITwInputComponent

IAsyncDisposable

Inherited Members

TwBlazorTextInputComponentBase.Variant

TwBlazorTextInputComponentBase.Dense

TwBlazorTextInputComponentBase.inputSizeClasses

TwBlazorTextInputComponentBase.effectiveVariant

TwBlazorInputComponentBase.Close()

TwBlazorInputComponentBase.RootId

TwBlazorInputComponentBase.RootClass

TwBlazorInputComponentBase.RootAttributes

TwBlazorInputComponentBase.Label

TwBlazorInputComponentBase.LabelId

TwBlazorInputComponentBase.LabelAttributes

TwBlazorInputComponentBase.LabelClass

TwBlazorInputComponentBase.ReadOnly

TwBlazorInputComponentBase.Disabled

TwBlazorInputComponentBase.Invalid

TwBlazorInputComponentBase.ErrorMessage

TwBlazorInputComponentBase.LabelClasses

TwBlazorInputComponentBase.errorId

TwBlazorComponentBase.ToLogicalKey(string)

TwBlazorComponentBase.DirectionalIcon(Icon, Icon)

TwBlazorComponentBase.options

TwBlazorComponentBase.localizer

TwBlazorComponentBase.roundedBuilder

TwBlazorComponentBase.shadowBuilder

TwBlazorComponentBase.colorBuilder

TwBlazorComponentBase.iconColorBuilder

TwBlazorComponentBase.popoverBuilder

TwBlazorComponentBase.Id

TwBlazorComponentBase.Class

TwBlazorComponentBase.Style

TwBlazorComponentBase.Attributes

TwBlazorComponentBase.AriaLabel

TwBlazorComponentBase.AriaLabelledBy

TwBlazorComponentBase.Shadow

TwBlazorComponentBase.Rounded

TwBlazorComponentBase.cascadedDirection

TwBlazorComponentBase.effectiveDirection

TwBlazorComponentBase.isRightToLeft

TwBlazorComponentBase.effectiveShadow

TwBlazorComponentBase.effectiveRounded

TwBlazorComponentBase.hasUserProvidedId

ComponentBase.OnInitialized()

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.RendererInfo

ComponentBase.Assets

ComponentBase.AssignedRenderMode

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

The field is a TwTextfield<T>, so it shares its variants, sizes, label, validation and error display. The value is parsed and formatted in Culture, kept within Min and Max, and stepped by Step.

The input has the spinbutton role, with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext kept up to date, so screen readers announce the value and its limits. Arrow Up and Arrow Down step the value, and Page Up and Page Down step it ten times as far. The buttons are left out of the Tab order, as the keys do the same job, and clicking them keeps focus in the field.

Constructors

TwNumeric()

Initializes a new instance, with Min, Max and Step set for T.

public TwNumeric()

Properties

BindEvent

Gets or sets the name of the DOM event that commits typed text. Defaults to onchange, which commits when the user leaves the field. Set it to oninput to update the value on every keystroke.

[Parameter]
public string BindEvent { get; set; }

Property Value

string

Clearable

Gets or sets whether the text field's clear button (see Clearable) is shown at the end of the field. It is disabled while the field is empty.

[Parameter]
public bool Clearable { get; set; }

Property Value

bool

Remarks

Clearing sets a nullable T to null, and any other type to zero, kept within Min and Max. The button is hidden while the field is disabled or read-only.

Culture

Gets or sets the culture the value is parsed and formatted in. Defaults to the culture set through options.Localization, or the current culture.

[Parameter]
public CultureInfo? Culture { get; set; }

Property Value

CultureInfo

DisableMouseWheel

Gets or sets whether the mouse wheel is ignored, so scrolling over the focused field scrolls the page instead of stepping the value.

[Parameter]
public bool DisableMouseWheel { get; set; }

Property Value

bool

Format

Gets or sets the .NET numeric format string the value is shown in, such as N2 for two decimal places with thousands separators, or C for currency. Defaults to the general format.

[Parameter]
public string? Format { get; set; }

Property Value

string

Remarks

The text is reformatted when the user leaves the field, or as soon as it is committed while BindEvent is onchange. Typed text is parsed in Culture, so thousands separators and the culture's currency symbol are accepted.

HideSpinButtons

Gets or sets whether the decrease and increase buttons are hidden. The keys and mouse wheel still step the value.

[Parameter]
public bool HideSpinButtons { get; set; }

Property Value

bool

InputRef

Gets the reference to the rendered <input> element.

public ElementReference InputRef { get; }

Property Value

ElementReference

InvertMouseWheel

Gets or sets whether scrolling the mouse wheel up decreases the value instead of increasing it.

[Parameter]
public bool InvertMouseWheel { get; set; }

Property Value

bool

Max

Gets or sets the highest value allowed. Defaults to the largest value T can hold.

[Parameter]
public T Max { get; set; }

Property Value

T

Remarks

A higher typed value is lowered to it, and stepping stops at it. For a nullable T, null means no limit.

Min

Gets or sets the lowest value allowed. Defaults to the smallest value T can hold.

[Parameter]
public T Min { get; set; }

Property Value

T

Remarks

A lower typed value is raised to it, and stepping stops at it. For a nullable T, null means no limit.

OnBlur

Gets or sets the callback that is invoked when the field loses focus.

[Parameter]
public EventCallback<FocusEventArgs> OnBlur { get; set; }

Property Value

EventCallback<FocusEventArgs>

OnClick

Gets or sets the callback invoked when the field is clicked.

[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }

Property Value

EventCallback<MouseEventArgs>

OnFocus

Gets or sets the callback that is invoked when the field is focused.

[Parameter]
public EventCallback<FocusEventArgs> OnFocus { get; set; }

Property Value

EventCallback<FocusEventArgs>

OnKeyDown

Gets or sets the callback invoked when a key is pressed while the field has focus. It runs before the key steps the value.

[Parameter]
public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }

Property Value

EventCallback<KeyboardEventArgs>

Pattern

Gets or sets a regular expression that each typed character must match, such as [0-9]. Keys that do not match are ignored.

[Parameter]
public string? Pattern { get; set; }

Property Value

string

Remarks

Defaults to the digits plus the separators and signs T can use in Culture: the decimal separator only for types that hold fractions, and the minus sign only when Min is below zero. Pasted text is not filtered, it is parsed and flagged when it is not a number. The pattern is tested in the browser as a JavaScript regular expression.

Placeholder

Gets or sets the placeholder text shown while the field is empty.

[Parameter]
public string Placeholder { get; set; }

Property Value

string

Prefix

Gets or sets text shown at the start of the field, such as a currency symbol.

[Parameter]
public string? Prefix { get; set; }

Property Value

string

Remarks

It is not part of the value. Screen readers hear it with the value through aria-valuetext.

Required

Gets or sets whether a value is required. The field is marked required for the browser's own validation and announced as required by assistive technology.

[Parameter]
public bool Required { get; set; }

Property Value

bool

Step

Gets or sets how much one step changes the value. Defaults to 1.

[Parameter]
public T Step { get; set; }

Property Value

T

Remarks

Used by Arrow Up and Arrow Down, the mouse wheel and the buttons. Page Up and Page Down take ten steps. A negative step is treated as positive.

Suffix

Gets or sets text shown at the end of the field, such as a unit.

[Parameter]
public string? Suffix { get; set; }

Property Value

string

Remarks

It is not part of the value. Screen readers hear it with the value through aria-valuetext.

Validator

Gets or sets an optional asynchronous validator invoked with the new value whenever it changes.

[Parameter]
public Func<T, Task<string?>>? Validator { get; set; }

Property Value

Func<T, Task<string>>

Remarks

Return null or an empty string to mark the value valid, or a message to mark the field invalid and show the message below it. The validator runs after ValueChanged is invoked.

Value

Gets or sets the current value.

[Parameter]
public T Value { get; set; }

Property Value

T

Remarks

Works with ValueChanged for @bind-Value. A nullable T lets the user empty the field, which sets the value to null.

ValueChanged

Gets or sets the callback that is invoked when the value changes.

[Parameter]
public EventCallback<T> ValueChanged { get; set; }

Property Value

EventCallback<T>

Remarks

Invoked when typed text is committed (see BindEvent), and on every step from a key, the mouse wheel or a button.

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

ClearAsync()

Empties the field. A nullable T becomes null, and any other type zero, kept within Min and Max.

public Task ClearAsync()

Returns

Task

A task that completes once the new value has been applied.

DecrementAsync()

Decreases the value by one Step, stopping at Min.

public Task DecrementAsync()

Returns

Task

A task that completes once the new value has been applied.

DisposeAsync()

Removes the keyboard and mouse wheel listeners from the field.

public ValueTask DisposeAsync()

Returns

ValueTask

A task that completes once the listeners are removed.

FocusAsync()

Moves focus to the field.

public Task FocusAsync()

Returns

Task

A task that completes once focus has been requested.

IncrementAsync()

Increases the value by one Step, stopping at Max.

public Task IncrementAsync()

Returns

Task

A task that completes once the new value has been applied.

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned Task, because that would cause an infinite render loop.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Set to true if this is the first time OnAfterRender(bool) has been invoked on this component instance; otherwise false.

Returns

Task

A Task representing any asynchronous operation.

Remarks

The OnAfterRender(bool) and OnAfterRenderAsync(bool) lifecycle methods are useful for performing interop, or interacting with values received from @ref. Use the firstRender parameter to ensure that initialization work is only performed once.

OnParametersSet()

Invoked when the component's parameters have been set. Ensures that the component has a unique identifier by generating one if none is provided.

protected override void OnParametersSet()

Remarks

If the component's identifier is not set, a unique ID is generated based on the component's type name (with a 'Tw' prefix removed if present) and a GUID. This helps ensure that each component instance can be uniquely identified, which is useful for scenarios such as associating labels with form elements or targeting elements in client-side scripts.