Blazorise NumericPicker component

A customizable NumericPicker component allows you to enter numeric values and contains controls for increasing and reducing the value.

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" />

Styling buttons

Use Classes or Styles to customize the step buttons and wrapper elements.

For advanced styling of the wrapper and step buttons, see the Styling guide. 

<NumericPicker TValue="int"
               @bind-Value="value"
               Min="0"
               Max="20"
               Styles='@(new NumericPickerStyles
               {
                   Self = "border: 2px solid #0b7285;",
                   Wrapper = "padding: 0.25rem; background: #f1f3f5; border-radius: 0.5rem;",
                   Buttons = "background: #e7f5ff;",
                   ButtonUp = "background: #0b7285; color: #ffffff;",
                   ButtonDown = "background: #0b7285; color: #ffffff;"
               })' />

@code {
    private int value = 5;
}

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" />

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;
}

Value Range

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

If you define a TValue as an integer type, NumericPicker will automatically ignore Decimals parameter and you will only be able to enter number without decimals. 
<NumericPicker @bind-Value="@value" />

@code{
    int value;
}

Mouse Wheel

Sometime you want to be able to change the value by scrolling with the mouse wheel when it is focused over the input. To enable it just use the ModifyValueOnWheel parameter. 
<NumericPicker @bind-Value="@value" ModifyValueOnWheel WheelOn="NumericWheelOn.Hover" />

@code {
    decimal value;
}

Best Practices

Use Meaningful Steps

A numeric picker is most useful when values are commonly adjusted in small steps. Set a step and bounds that reflect the domain, and disable increment or decrement actions when their limit is reached. When users normally type an exact value, a NumericInput may be more direct.

Avoid Accidental Changes

Enable mouse-wheel changes only when unintended adjustments are unlikely, and always retain keyboard and direct-entry support. Units or currency belong in the label or formatting rather than in the stored numeric value.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page