LgNumericBox

LgNumericBox<TValue> allows you to input a number. The field filters entered characters, applies a display format, rounds according to the configured mode, and can display increment/decrement buttons. The bound value is a numeric type (int, long, decimal, double, float… or their nullable version).

<LgNumericBox Label="#Quantity" @bind-Value="_model.Quantity" />

• Namespace : Lagoon.UI.Components
• Inherits from : LgInputRenderBase<TValue> → LgInputBase<TValue> → LgAriaComponentBase → LgComponentBase
• NuGet package : Lagoon.UI

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple input

The default number of decimals depends on the bound type (0 for integers) and the default display format is N<Decimals>. On mobile, the numeric virtual keyboard is forced (inputmode="decimal").

OrderLinePage.razor

<LgNumericBox Label="#Quantity" @bind-Value="_model.Quantity" />

OrderLinePage.razor.cs

public partial class OrderLinePage : LgPage
{
    private readonly OrderLineVm _model = new();

    private sealed class OrderLineVm
    {
        public int? Quantity { get; set; }
    }
}

Decimals, format, and rounding

Decimals sets the number of decimals, DisplayFormat replaces the display format, and RoundValueMode the rounding mode (by default, the one from the application behavior configuration). Prefix / Suffix (inherited) allow you to display a unit.

PricePage.razor

<LgNumericBox Label="#UnitPrice"
              Decimals="2"
              RoundValueMode="MidpointRounding.AwayFromZero"
              Suffix="€"
              SuffixType="InputLabelType.Text"
              @bind-Value="_model.UnitPrice" />

PricePage.razor.cs

public partial class PricePage : LgPage
{
    private readonly PriceVm _model = new();

    private sealed class PriceVm
    {
        public decimal? UnitPrice { get; set; }
    }
}

Increment buttons

IncrementStep (non-zero) displays increase / decrease buttons in the field, which vary the value by the indicated step.

StockPage.razor

<LgNumericBox Label="#StockLevel"
              IncrementStep="10"
              @bind-Value="_model.StockLevel" />

StockPage.razor.cs

public partial class StockPage : LgPage
{
    private readonly StockVm _model = new();

    private sealed class StockVm
    {
        public int StockLevel { get; set; }
    }
}

Respond to value changes

OnChangingAsync is called before assignment and allows you to cancel the change (args.Cancel); OnChange (inherited) is called after. OnInput notifies on each keystroke, OnKey on each key release, and OnFocus on focus gain. Resetting via the clear button also triggers OnInput, with an empty value (""), unless canceled (OnChangingAsync, ConfirmationMessage). ParsingErrorMessage customizes the message displayed when the input is not a valid number.

DiscountPage.razor

<LgNumericBox Label="#DiscountRate"
              Decimals="1"
              ParsingErrorMessage="#DiscountFormatError"
              OnChangingAsync="OnDiscountChangingAsync"
              @bind-Value="_model.DiscountRate" />

DiscountPage.razor.cs

public partial class DiscountPage : LgPage
{
    private readonly DiscountVm _model = new();

    // Called before the change: constrains the discount without going through form validation.
    private Task OnDiscountChangingAsync(ChangingEventArgs<double?> args)
    {
        if (args.NewValue is < 0 or > 100)
        {
            args.Cancel = true;
            ShowWarning("#DiscountOutOfRange");
        }
        return Task.CompletedTask;
    }

    private sealed class DiscountVm
    {
        public double? DiscountRate { get; set; }
    }
}

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
Decimals	int?	null	LgNumericBox	Number of decimals. If null, deduced from the bound type (0 for integers).
DisplayFormat	string	null	LgNumericBox	Display format. If null, N<Decimals> is used.
IncrementStep	TValue	default	LgNumericBox	Step for increase/decrease buttons. Buttons are displayed only if the step is non-zero.
OnChangeDisabled	bool	false	LgNumericBox	Disables the DOM onchange event in favor of oninput (used to avoid errors when the control is removed from rendering).
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	null	LgNumericBox	Callback called before value change; the change can be canceled there.
OnFocus	EventCallback<FocusEventArgs>	—	LgNumericBox	Callback called on focus gain.
OnInput	EventCallback<ChangeEventArgs>	—	LgNumericBox	Callback called on each field content modification, including reset via the clear button (empty value "").
OnKey	EventCallback<KeyboardEventArgs>	—	LgNumericBox	Callback called on key release.
ParsingErrorMessage	string	#lgNumericBoxErrFormat	LgNumericBox	Error message displayed when the input is not a valid number.
Placeholder	string	null	LgNumericBox	Placeholder text displayed when the field is empty.
RoundValueMode	MidpointRounding?	null	LgNumericBox	Rounding mode. If null, the mode from the application behavior configuration applies.
Prefix	string	null	LgInputRenderBase	Prefix displayed in the field (e.g. a currency).
PrefixType	InputLabelType	Text	LgInputRenderBase	Nature of the prefix.
Suffix	string	null	LgInputRenderBase	Suffix displayed in the field (e.g. a unit).
SuffixType	InputLabelType	Text	LgInputRenderBase	Nature of the suffix.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase	Additional HTML attributes applied to the rendered element.
AutoFocus	bool	false	LgInputBase	Gives focus to the field on first render.
ConfirmationMessage	string	null	LgInputBase	Confirmation message displayed before applying a value change.
Container	IInputContainer<TValue>	null	LgInputBase	Internal use: attaches a GridView cell to the field.
CssClass	string	null	LgInputBase	Additional CSS classes.
Disabled	bool	false	LgInputBase	Disables the field.
DisplayName	string	null	LgInputBase	Field name used in input validation error messages.
HideValidationMessage	bool	false	LgInputBase	Hides the validation message below the field.
Label	string	null	LgInputBase	Field label.
LabelContent	RenderFragment	null	LgInputBase	Custom label area content.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback called after value change.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback called when the field is reset by the clear button.
PolicyEdit	string	null	LgInputBase	Policy required to edit the field.
PolicyVisible	string	null	LgInputBase	Policy required to display the field.
ReadOnly	bool	false	LgInputBase	Displays the field as read-only.
Required	bool?	null	LgInputBase	Required field. If null, deduced from the [Required] attribute of the bound property.
ResetButton	bool?	null	LgInputBase	Displays the clear button. If null, the application behavior configuration applies.
ResetText	string	null	LgInputBase	Clear button text.
ResetTextAriaLabel	string	null	LgInputBase	Accessible label (aria-label) of the clear button.
Tooltip	string	null	LgInputBase	Tooltip.
TooltipIsHtml	bool	false	LgInputBase	Indicates whether the Tooltip content is in HTML format (otherwise plain text).
Value	TValue	—	LgInputBase	Bound value (@bind-Value), of numeric type.
ValueChanged	EventCallback<TValue>	—	LgInputBase	Callback for updating the bound value.
ValueExpression	Expression<Func<TValue>>	—	LgInputBase	Expression identifying the bound property.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Cascading parameters

LgNumericBox also consumes parameters automatically provided by ancestor components (you don't need to define them): ParentAuthorizeView (LgAuthorizeView) and the edit context of a parent LgEditForm.

Events

Event	Type	Description
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	Before value change; args.Cancel = true cancels the change.
OnChange	EventCallback<ChangeEventArgs>	After value change.
OnInput	EventCallback<ChangeEventArgs>	On each field content modification, including reset via the clear button (empty value "", unless the reset is canceled).
OnKey	EventCallback<KeyboardEventArgs>	On key release in the field.
OnFocus	EventCallback<FocusEventArgs>	On field focus gain.
OnReset	EventCallback<ChangeEventArgs>	On reset by the clear button.

Best practices / Accessibility

• Choose the bound type according to your business need (decimal for amounts): the default number of decimals follows from it.
• For a unit or currency, prefer Prefix / Suffix over a label in the Label: the information remains visible close to the value.

Complete reference

All parameters (inherited ones included): API Reference — LgNumericBox.

Related components

• LgTextBox — text input.
• LgGridNumericColumn — numeric column in an LgGridView.