Numeric input in percentages with value normalization (0% = 0, 100% = 1.0).

Basic example #

Entered value: 0
<HxInputPercent @bind-Value="input" Decimals="1" />

Entered value: @input

@code {
    private decimal input;

InputGroupEnd #

InputGroupEnd is set to "%" by default.

Custom InputGroupEnd
<HxInputPercent InputGroupEndText="Custom InputGroupEnd" @bind-Value="input" />

@code {
    private decimal input;

If you do not want any InputGroupEnd to appear, then set the parameter to null or String.Empty.

<HxInputPercent InputGroupEndText="" @bind-Value="input" />

@code {
    private decimal input;



Name Type Description
AdditionalAttributes IReadOnlyDictionary<string, object> A collection of additional attributes that will be applied to the created element.
ChipTemplate RenderFragment Chip template.
CssClass string Custom CSS class to render with 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
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, 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). Default is true.
Hint string Hint to render after input as form-text.
HintTemplate RenderFragment Hint to render after input as form-text.
InputCssClass string 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 HxInputNumber.Defaults, i.e. null), the InputMode.Numeric will be used for Decimals equal to 0.
InputSize InputSize? Size of the input.
Label string Label text.
LabelCssClass string Custom CSS class to render with the label.
LabelTemplate RenderFragment 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.
Settings InputNumberSettings Set of settings to be applied to the component instance (overrides HxInputNumber.Defaults, overriden by individual parameters).
ValidationMessageMode ValidationMessageMode? Specifies how the validation message should be displayed.
Default is ValidationMessageMode.Regular, you can override application-wide default for all inputs in HxInputBase.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.


Method Returns Description
FocusAsync() ValueTask Gives focus to the input element.
An unhandled error has occurred. Reload 🗙