sufi-blazor/docs/components/forms/SbNumberField.md

SbNumberField

A numeric input component with increment/decrement spin buttons, supporting min/max constraints and step increments.

Parameters

Parameter	Type	Default	Description
Value	TNumber	-	The current numeric value (two-way bindable)
ValueChanged	EventCallback<TNumber>	-	Callback when value changes
Min	TNumber?	null	Minimum allowed value
Max	TNumber?	null	Maximum allowed value
Step	TNumber?	null	Step increment (defaults to 1)
ShowSpinButtons	bool	true	Whether to show increment/decrement buttons
Placeholder	string?	null	Placeholder text
Disabled	bool	false	Whether the field is disabled
ReadOnly	bool	false	Whether the field is read-only
Id	string?	null	Element ID
Label	string?	null	Label text displayed above the input
Required	bool	false	Whether the field is required
HelperText	string?	null	Helper or hint text shown below the input
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes for the input
IncreaseAriaLabel	string	"Increase"	Aria label for increase button
DecreaseAriaLabel	string	"Decrease"	Aria label for decrease button

Events

Event	Type	Description
ValueChanged	EventCallback<TNumber>	Fired when the value changes

Supported Types

The component supports any numeric struct type implementing IComparable<T>:

• int, long, short, byte
• float, double, decimal

CSS Classes

• sb-number-field - Base class
• sb-number-field__label - Label element (stacked above input)
• sb-number-field__required - Required asterisk
• sb-number-field__input-group - Wrapper for input and spin buttons
• sb-number-field__input - The input element
• sb-number-field__spinners - Spin buttons container
• sb-number-field__spinner - Individual spinner button
• sb-number-field__helper - Helper text container
• sb-number-field--disabled - Disabled state

Accessibility

• Uses native <input type="number">
• Spin buttons have appropriate aria-labels
• Min/max/step reflected in HTML attributes
• Keyboard: Arrow up/down to increment/decrement

Examples

Basic Usage

<SbNumberField TNumber="int" @bind-Value="quantity" Label="Quantity" />

With Constraints

<SbNumberField TNumber="int" 
               @bind-Value="age" 
               Label="Age"
               Min="0"
               Max="150"
               HelperText="Enter age between 0 and 150" />

Decimal with Step

<SbNumberField TNumber="decimal" 
               @bind-Value="price" 
               Label="Price"
               Min="0"
               Step="0.01m" />

Without Spin Buttons

<SbNumberField TNumber="int" 
               @bind-Value="year" 
               Label="Year"
               ShowSpinButtons="false"
               Min="1900"
               Max="2100" />

Percentage

<SbNumberField TNumber="int" 
               @bind-Value="percentage" 
               Label="Discount %"
               Min="0"
               Max="100"
               Step="5" />

Disabled State

<SbNumberField TNumber="int" 
               Value="42" 
               Label="Fixed Value"
               Disabled="true" />

Float with Precision

<SbNumberField TNumber="float" 
               @bind-Value="temperature" 
               Label="Temperature (°C)"
               Min="-273.15f"
               Step="0.1f" />