Skip to content

[Feature Request] Add FluentNumberInput component for V5 #4667

@AClerbois

Description

@AClerbois

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    v5For the next major version

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions