HxInputPercent #

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

HxInputPercent outputs a number divided by 100 representing the percentages

Basic usage #

Entered value: 0

<HxInputPercent @bind-Value="input" Decimals="1" />

<div class="mt-3">Entered value: @input</div>

@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;
}

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.