Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Numeric Input
A generic numeric input with optional increment/decrement buttons, min/max constraints, step configuration, and keyboard navigation, supporting int, double, decimal, and other numeric types.
Default
A basic integer input using
NumericInput with @bind-Value for two-way binding. The component renders a text input with inputmode set appropriately for the numeric type, ensuring mobile devices show a numeric keyboard.
Loading example…
With Buttons
Enable
ShowButtons to display increment and decrement buttons alongside the input. Combined with Min and Max, the value is constrained to a specific range. Buttons are automatically disabled when the value reaches the boundary, and role="spinbutton" is applied for screen readers.
Loading example…
Decimal Values
Use
TValue="decimal" for precise decimal input with the DecimalPlaces parameter controlling display precision. The Step is set to 0.01m for cent-level increments, making this ideal for price or measurement inputs where fractional values matter.
Loading example…
Double with Step
A
double-typed input with a custom Step value of 0.5 and Min/Max constraints. This is useful for percentage sliders, scientific measurements, or any scenario requiring floating-point precision with defined boundaries.
Loading example…
Non-Negative Only
Set
AllowNegative to false to prevent negative values from being entered or reached via keyboard or button interactions. Any negative input is automatically clamped to zero. This is useful for fields like quantity, age, or count where negative values are meaningless.
Loading example…
Disabled
Set
Disabled to true to prevent all user interaction. Both the input field and the increment/decrement buttons become non-interactive with reduced opacity and a not-allowed cursor. Keyboard shortcuts are also disabled.
Loading example…
Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes for project-specific styles. You can change the border color, focus ring, or text alignment to match your design system without creating a new component.
Loading example…
Quantity Selector
A real-world quantity selector pattern combining a
NumericInput with increment/decrement buttons inside a product card. This layout is common in e-commerce cart interfaces where users adjust item quantities with immediate visual feedback.
Loading example…
Public Methods
Use a component reference (@ref) to call this method programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask | Moves keyboard focus to the underlying input element. Call via @ref — no JS interop needed. |
The component also exposes a public Element property of type ElementReference that points at the underlying input element, for advanced JS interop scenarios.