NumberInput.Blazor 10.0.0

Blazor Custom Input Number Component

This library provides a highly customizable and robust numeric input component for Blazor applications. It is designed to handle real-number entry with advanced localization support, min/max range validation, and real-time formatting.

🚀 Key Features

• Culture-Aware Formatting:** Seamlessly handles decimal and group separators based on CultureInfo.
• Real-time Validation:** Uses Regex-based pattern matching to ensure input integrity while the user types.
• Precise Control:** Configurable step increments, decimal places, and min/max range constraints.
• Responsive UI:** Built with Bootstrap 5 integration for consistent, professional styling.
• Event-Driven:** Easy integration with standard Blazor data binding (@bind-NumberValue support).

🛠️ Installation and API Reference

To use the component, add a reference to the NumberComponentLibrary project and ensure Bootstrap 5 CSS/JS is loaded in your application.

Usage Example

<NumberInput 
    @bind-NumberValue="myDecimalValue"
    MinValue="0"
    MaxValue="1000"
    DecimalPlaces="2"
    Placeholder="Enter a number..."
    Required="true" />

Component Parameters

The component supports the following configuration parameters:

• Culture: CultureInfo (default: CultureInfo.CurrentCulture) Used for formatting the number value. If not set, gets CurrentCulture from system settings.

• NumberValue: decimal? (default: null) Entered or selected decimal value formatted and displayed to the user.

• Disabled: bool? (default: false) Flag for enabling or disabling the component.

• Step: decimal? (default: decimal.One) Increase/decrease step value for up/down selection arrows. If set to decimal.Zero → "any".

• MinValue: decimal? (default: decimal.MinValue) Minimal value that can be entered or selected.

• MaxValue: decimal? (default: decimal.MaxValue) Maximum value that can be entered or selected.

• NumberFormat: string? (default: "N") String representation of number format (overrides DecimalPlaces if set after it).

• DecimalPlaces: int? (default: null) Number of allowed decimal places inside the component. Defaults to Culture settings.

• TextAllign: string? (default: "text-center") Align text inside the component text box (text-start, text-center, text-end).

• Required: bool? (default: false) Is Required Value flag for visual validation (applies red/green borders).

• ShowStandardRequiredMessage: bool? (default: false) Flag for showing standard HTML popup message for required fields.

• RequiredValueValidationMessage: string? (default: "Value in this field is required.") Custom validation message for the required field.

• PreventEnter: bool? (default: false) Flag for preventing the acceptance of the Enter key.

• Placeholder: string? (default: null) Placeholder text displayed when the input is empty.

• AutoComplete: string? (default: "off") Flag for enabling or disabling autocomplete for the HTML input.

📂 Project Structure

/NumberComponentLibrary: 
    Source code for the NumberInput component, 
    including the Razor markup and its partial C# class logic.

/NumberComponentTestApp: 
    Blazor application for testing and 
    demonstrating the component functionality in real-world scenarios.

📄 License

• This project is licensed under the CC0-1.0 license (Public Domain).
• To the extent possible under law, the author(s) have dedicated all copyright and related rights to this software to the public domain worldwide.
• Feel free to use, modify, and distribute the code without any restrictions.
• For more details, see the LICENSE file or view the full legal text at Creative Commons CC0 1.0 Universal.

📧 Contact

If you have any questions, encounter issues, or need assistance with the component, 
feel free to reach out via email: periczeljkosmederevo@yahoo.com.