NumericPicker component

Use <NumericPicker> to have a field for any kind of numeric values. All basic types are supported, including nullable types (int, long, float, double, decimal, etc.).

Examples

Basic

<NumericPicker Value="123" />

Rules

Generic type

Since NumericPicker is a generic component you will have to specify the exact data type for the value. Most of the time it will be recognized automatically when you set the Value attribute, but if not you will just use the TValue attribute and define the type manually eg.
<NumericPicker TValue="decimal?" />

Curency symbols

The display format of the NumericPicker can be adjusted to provide more context for the value it represents, such as displaying currency. By defining the CurrencySymbol parameter you can use any symbol. Additionally you can define the symbol position with the CurrencySymbolPlacement parameter.
<NumericPicker TValue="decimal?" CurrencySymbol="$" Value="456" />

Controlling the step value

Set the amount to increment or decrement the value when the spinner buttons are used with the step parameter.
<NumericPicker @bind-Value="@value" Step="10" />
@code{
    decimal value;
}

Setting the Min & Max

Set the Min & Max to limit the values allowed into the input.
<NumericPicker @bind-Value="@value" Min="10" Max="20" />
@code{
    decimal value = 15;
}

Integer values

To only allow the integer values without the decimals, you can set the Decimals="0"
<NumericPicker @bind-Value="@value" Decimals="0" />
@code{
    int value;
}

Attributes

NumericPicker is just a specialized version of TextEdit component so all of the rules and styles are still working all the same. See TextEdit to find the list of supported attributes.

Name Description Type Default
TValue Generic type parameter used for the value attribute. generic
Value Gets or sets the value inside the input field. TValue default
ValueChanged Occurs after the value has changed. EventCallback<TValue>
Step Specifies the interval between valid values. decimal? null
Decimals Maximum number of decimal places after the decimal separator. int 2
DecimalSeparator String to use as the decimal separator in numeric values. string "."
AlternativeDecimalSeparator String to use as the alternative decimal separator in numeric values. string ","
GroupSeparator Defines the thousand grouping separator character. string
GroupSpacing Defines how many numbers should be grouped together (usually for the thousand separator). string 3
CurrencySymbol Defines the currency symbol to display. string
CurrencySymbolPlacement Placement of the currency sign, relative to the number shown (as a prefix or a suffix). CurrencySymbolPlacement Prefix
Culture Helps define the localization of an element (used for parsing of the value). string null
Min The minimum value to accept for this input. TValue default
Max The maximum value to accept for this input. TValue default
MinMaxLimitsOverride Override the minimum and maximum limits. NumericMinMaxLimitsOverride Ignore
Autofocus Set’s the focus to the component after the rendering is done. bool false
ShowStepButtons If true, step buttons will be visible. bool? true
EnableStep If true, enables change of numeric value by pressing on step buttons or by keyboard up/down keys. bool? true
SelectAllOnFocus If true, selects all the text entered in the input field once it receives the focus. bool false
RoundingMethod Method used for rounding decimal values. NumericRoundingMethod HalfUpSymmetric
AllowDecimalPadding Setting AllowDecimalPadding to 'false' will override the Decimals setting. NumericRoundingMethod Always
AlwaysAllowDecimalSeparator Defines if the decimal character or decimal character alternative should be accepted when there is already a decimal character shown in the element. bool false