HxInputNumber #

Numeric input.

Basic usage #

Enter a number

Entered number: 0

<HxInputNumber Label="Enter a number" Decimals="1" @bind-Value="enteredNumber" />

<div class="mt-3">Entered number: @enteredNumber</div>

@code {
    private float enteredNumber;
}

Input modes #

InputMode is a hint to browsers as to the type of virtual keyboard configuration to use when editing.

If not set (neither with parameter, Settings nor HxInputNumber.Defaults), the InputMode.Numeric will be used for inputs with Decimals equal to 0.

Note: We do not default to InputMode.Decimal for inputs with Decimals greater than 0 because users with keyboard locale not matching the application locale won't be able to enter a decimal point (which is , in some locales and . in others). Feel free to set the InputMode on your own as needed.

No decimals (InputMode defaults to Numeric)

Decimals (InputMode not set)

Explicit InputMode.Decimal

Input types #

Type parameter allows you to change the <input type="..."> of the underlying HTML element.

InputType.Text (default)

InputType.Number

InputType.Text is the default value and is used when Type is not set.

Respects your application culture (CultureInfo.CurrentCulture)
Does not prevent non-numeric input (unless combined with additional JavaScript)
Allows for enhanced UX tricks (eg., automatic replacement of comma/decimal separators)

InputType.Number is a browser-provided input type that restricts input to numeric values.

Does not respect your application culture, uses user's browser locale.
Prevents non-numeric input.
Uses only browser-provided UX.

Select on focus #

The SelectOnFocus parameter allows you to determine whether all the content within the input field is automatically selected when it receives focus.

SelectOnFocus="true" (default)

SelectOnFocus="false"

API #

Parameters #

Name	Type	Description
AdditionalAttributes	`IReadOnlyDictionary<string, object>`	A collection of additional attributes that will be applied to the created element.
ChipTemplate	`RenderFragment`	The chip template.
CssClass	`string`	The custom CSS class to render with the wrapping div.
Decimals	`int?`	Gets or sets the number of decimal digits. Can be used only for floating point types, for integer types throws exception (for values other than 0). When not set, 2 decimal digits are used.
DisplayName	`string`	Gets or sets the display name for this field. This value is used when generating error messages when the input value fails to parse correctly.
Enabled	`bool?`	When `null` (default), the `Enabled` value is received from the cascading `FormState`. When the value is `false`, the input is rendered as disabled. To set multiple controls as disabled, use HxFormState.
GenerateChip	`bool`	When `true`, `HxChipGenerator` is used to generate chip item(s). The default is `true`.
Hint	`string`	The hint to render after the input as form-text.
HintTemplate	`RenderFragment`	The hint to render after the input as form-text.
InputCssClass	`string`	The custom CSS class to render with the input element.
InputGroupEndTemplate	`RenderFragment`	Input group at the end of the input.
InputGroupEndText	`string`	Input group at the end of the input.
InputGroupStartTemplate	`RenderFragment`	Input group at the beginning of the input.
InputGroupStartText	`string`	Input group at the beginning of the input.
InputMode	`InputMode?`	Hint to browsers as to the type of virtual keyboard configuration to use when editing. If not set (neither with `Settings` nor `Defaults`, i.e. `null`), the `InputMode.Numeric` will be used for `Decimals` equal to `0`.
InputSize	`InputSize?`	Size of the input.
Label	`string`	The label text.
LabelCssClass	`string`	The custom CSS class to render with the label.
LabelTemplate	`RenderFragment`	The label content.
LabelType	`LabelType?`	Label type.
ParsingErrorMessage	`string`	Gets or sets the error message used when displaying an a parsing error. Used with String.Format(...), {0} is replaced by Label property, {1} name of bounded property.
Placeholder	`string`	Placeholder for the input.
SelectOnFocus	`bool?`	Determines whether all the content within the input field is automatically selected when it receives focus.
Settings	`InputNumberSettings`	Set of settings to be applied to the component instance (overrides `Defaults`, overridden by individual parameters).
Type	`InputType?`	Allows switching between textual and numeric input types. Only `InputType.Text` (default) and `InputType.Number` are supported.
ValidationMessageMode	`ValidationMessageMode?`	Specifies how the validation message should be displayed. The default is `ValidationMessageMode.Regular`, you can override the application-wide default for all inputs in `Defaults`.
Value	`TValue`	Value of the input. This should be used with two-way binding.
ValueChanged	`EventCallback<TValue>`	A callback that updates the bound value.
ValueExpression	`Expression<Func<TValue>>`	An expression that identifies the bound value.

Methods #

Method	Returns	Description
FocusAsync()	`ValueTask`	Gives focus to the input element.

Static properties #

Property	Type	Description
Defaults	`InputNumberSettings`	Application-wide defaults for the `HxAutosuggest` and derived components.