Number field
An implementation of a text field. The <FluentNumberField> supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.
<FluentNumberField> wraps the <fluent-number-field> element, a web component implementation of a number input field leveraging the
Fluent UI design system.
Note: The underlying web component is known to have quite some issues which won't get fixed (and can't be fixed on out side). Be carefull when choosing to use this component.
Also, we'd advise in general to not use a NumberField for this kind of input See also this article for reasons and alternatives
As an alternative, you could consider using a standard InputNumber with styling applied.
Examples
Default
Example int: 123
Minimum value: -2147483648; Maximum value: 2147483647
Example nullable int:
Minimum value: -2147483648; Maximum value: 2147483647
Same as above but bound to oninput event
Example int: 345
Nullable int bound to oninput event
Example nullable int:
Types
Example long: 9999999997
Minimum value: -9999999999; Maximum value: 9999999999
Minimum value: -32768; Maximum value: 32767
Example float: 123.45
Minimum value: -9999999999; Maximum value: 9999999999
Example float: 123.45 (step=0.25)
Minimum value: -9999999999; Maximum value: 9999999999
Example double: 456.32
Minimum value: -9999999999; Maximum value: 9999999999
Example decimal: 0.3333333333333333333333333333
Minimum value: -9999999999; Maximum value: 9999999999
Minimum value: 0; Maximum value: 65535
Minimum value: 0; Maximum value: 4294967295
Minimum value: 0; Maximum value: 9999999999
Types with constraints
Minimum value: 0; Maximum value: 65535
Minimum value: 0; Maximum value: 10
Minimum value: 5; Maximum value: 10
Displays
Full Width
Placeholder
Hide up/down steps
Required
Disabled
Read only
Icons
Icons
Focus
Autofocus
Commented out to prevent page actually jumping to this location. See example code on 'Razor'-tab for implementation.
Focus Async
Filled Appearance
Default
Placeholder
Required
Disabled
Read only
Documentation
FluentNumberField<TValue> Class
Inherits from FluentInputBase<TValue>.
There might be parameters and/or methods shown here that are inherited from the component's base type but are not applicable to this component.
TValue can be one of the following Type's:
intlongshortfloatdoubledecimal
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Appearance | FluentInputAppearance | Outline | Gets or sets the Appearance. |
AriaLabel | string? | Gets or sets the text used on aria-label attribute. | |
AutoComplete | string? | Specifies whether a form or an input field should have autocomplete 'on' or 'off' or another value. An Id value must be set to use this property. | |
Autofocus | bool | False | Determines if the element should receive document focus on page load. |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
DataList | string? | ||
Disabled | bool | False | Disables the form control, ensuring it doesn't participate in form submission. |
DisplayName | string? | Gets or sets the display name for this field. | |
Embedded | bool | False | Gets or sets if the derived component is embedded in another component. If true, the ClassValue property will not include the EditContext's FieldCssClass. |
Field | FieldIdentifier? | Gets or sets the FluentInputBase that identifies the bound value.If set, this parameter takes precedence over FluentInputBase. | |
HideStep | bool | False | When true, spin buttons will not be rendered. |
Immediate | bool | False | Change the content of this input field when the user write text (based on 'OnInput' HTML event). |
ImmediateDelay | int | 0 | Gets or sets the delay, in milliseconds, before to raise the FluentInputBase event. |
Label | string? | Gets or sets the text to label the input. This is usually displayed just above the input | |
LabelTemplate | RenderFragment? | Gets or sets the content to label the input component. This is usually displayed just above the input | |
Max | string? | Gets or sets the maximum value. | |
MaxLength | int | 14 | Gets or sets the maximum length. |
Min | string? | Gets or sets the minimum value. | |
MinLength | int | 1 | Gets or sets the minimum length. |
Name | string? | Gets or sets the name of the element. Allows access by name from the associated form. ⚠️ This value needs to be set manually for SSR scenarios to work correctly. | |
ParsingErrorMessage | string | The {0} field must be a (valid) number. | Gets or sets the error message to show when the field can not be parsed. |
Placeholder | string? | Gets or sets the short hint displayed in the input before the user enters a value. | |
ReadOnly | bool | False | When true, the control will be immutable by user interaction. readonly HTML attribute for more information. |
Required | bool | False | Gets or sets a value indicating whether the element needs to have a value. |
Size | int | 20 | Gets or sets the size. |
Step | string | 1 | Gets or sets the amount to increase/decrease the number with. Only use whole number when TValue is int or long. |
UseTypeConstraints | bool | False | If true, the min and max values will be automatically set based on the type of TValue, unless an explicit value for Min or Max is provided. |
Value | TValue? | Gets or sets the value of the input. This should be used with two-way binding. | |
ValueExpression | Expression<Func<TValue>>? | Gets or sets an expression that identifies the bound value. |
EventCallbacks
Name | Type | Description |
|---|---|---|
ValueChanged | EventCallback<TValue> | Gets or sets a callback that updates the bound value. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask | ||
FocusAsync | void | Exposes the elements FocusAsync(bool preventScroll) method. | |
FocusAsync | bool preventScroll | void | Exposes the elements FocusAsync(bool preventScroll) method. |