Summary
The V5 release of Fluent UI Blazor does not include a dedicated FluentNumberInput component for numeric input. In V4, numeric input was handled via FluentNumberField, but there is no equivalent in V5.
A FluentNumberInput<TValue> component wrapping <fluent-text-input type="number"> with proper step/min/max support would be very useful.
Use Case
Entering numeric values (integers, decimals) with validation, step increment, and min/max boundaries is a common requirement in forms.
Expected API / Code Example
@using Microsoft.FluentUI.AspNetCore.Components
<FluentNumberInput TValue="int"
@bind-Value="@Quantity"
Min="0"
Max="100"
Step="1"
Placeholder="Enter quantity"
Label="Quantity"
Required="true" />
<FluentNumberInput TValue="decimal"
@bind-Value="@Price"
Min="0.00m"
Max="9999.99m"
Step="0.01m"
Placeholder="Enter price"
Label="Price"
Width="200px" />
@code {
private int Quantity { get; set; } = 1;
private decimal Price { get; set; } = 9.99m;
}
Expected Parameters
| Parameter |
Type |
Description |
TValue |
Generic (int, double, decimal, etc.) |
The numeric type for the value |
Value |
TValue |
The bound value |
Min |
TValue? |
Minimum allowed value |
Max |
TValue? |
Maximum allowed value |
Step |
TValue? |
Step increment (e.g., 0.01 for decimals) |
Placeholder |
string? |
Hint text shown when empty |
Appearance |
TextInputAppearance |
Visual style (Outline, FilledLighter, etc.) |
StartTemplate |
RenderFragment? |
Content prefix (e.g., currency symbol) |
EndTemplate |
RenderFragment? |
Content suffix (e.g., unit label) |
Additional Context
This component should support:
- All common numeric types (
byte, short, int, long, float, double, decimal)
- Proper invariant culture parsing (HTML
<input type="number"> uses . as decimal separator regardless of locale)
- Integration with
FluentField for label, validation messages, and required state
- Immediate mode (update on each keystroke) and standard mode (update on blur/change)
Summary
The V5 release of Fluent UI Blazor does not include a dedicated
FluentNumberInputcomponent for numeric input. In V4, numeric input was handled viaFluentNumberField, but there is no equivalent in V5.A
FluentNumberInput<TValue>component wrapping<fluent-text-input type="number">with proper step/min/max support would be very useful.Use Case
Entering numeric values (integers, decimals) with validation, step increment, and min/max boundaries is a common requirement in forms.
Expected API / Code Example
Expected Parameters
TValueint,double,decimal, etc.)ValueTValueMinTValue?MaxTValue?StepTValue?0.01for decimals)Placeholderstring?AppearanceTextInputAppearanceStartTemplateRenderFragment?EndTemplateRenderFragment?Additional Context
This component should support:
byte,short,int,long,float,double,decimal)<input type="number">uses.as decimal separator regardless of locale)FluentFieldfor label, validation messages, and required state