NumberInput
A numeric input with increment/decrement buttons.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <NumberInput />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
40 tests across 3 files. Auto-generated from the test suite.
When to Use
- Quantity selectors in shopping carts or inventory forms
- Numeric settings such as font size, zoom level, or timeout values
- Price inputs requiring precise decimal control
- Any field where users should increment or decrement a number in defined steps
Value: 50 (0-100, step 5)
$
kg
Scroll the wheel over the input to adjust the value.
Step:
Precision:
Adjust the step size and decimal precision interactively.
API Reference
Density falls back to an ancestor DensityScope, then Comfortable. See the Density guide.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | double? | — | The current numeric value; null when empty. |
| Min | double? | — | Lower bound; typed/stepped values are clamped to it. Null means no lower bound. |
| Max | double? | — | Upper bound; typed/stepped values are clamped to it. Null means no upper bound. |
| Step | double | 1 | Amount added/subtracted per +/- click, ArrowUp/ArrowDown, or mouse-wheel tick. Default 1. |
| Precision | int? | — | Number of decimal places the value is rounded to on every change. Null leaves fractional precision unrounded (except for FP cleanup on stepped values). |
| Disabled | bool | false | Disables the input and both stepper buttons. Default false. |
| UseMouseWheel | bool | false | Enables incrementing/decrementing by scrolling the mouse wheel over the input. Default false. |
| Prefix | string? | — | Text rendered inside the input before the value (e.g. a currency symbol). |
| Suffix | string? | — | Text rendered inside the input after the value (e.g. a unit). |
| Culture | System.Globalization.CultureInfo? | — | Culture used to parse typed input. Display of the value inside the native <input type="number"> element uses InvariantCulture because HTML5 requires period-as-decimal — browsers will not accept a comma decimal in this input type. Leave null to honour ASP.NET request localization for parsing (lets a de-DE user paste 1,5 and have it round-trip to 1.5). |
| Required | bool | false | Marks the field as required, rendering a trailing asterisk on the label and setting aria-required. Default false. |
| Invalid | bool | false | Forces the invalid (error) visual state and aria-invalid, independent of any ancestor FormField. Default false. |
| ErrorText | string? | — | Error text shown below the control when invalid (outside a FormField) and not inside a FormField. |
| HelperText | string? | — | Helper text shown below the control when not invalid and not inside a FormField. |
| Label | string? | — | Label text rendered above the control (unless the control is inside a FormField, which renders its own label). |
| AriaLabel | string? | — | Explicit accessible name for the input, taking priority over Label when both are set. |
| Name | string? | — | The name attribute for form submission. |
| AutoFocus | bool | false | Focuses the underlying number <input> on first render. See Input.AutoFocus for why the HTML autofocus attribute doesn't work in Blazor WASM. |
| Density | Density? | — | Per-control density override. When null, inherits from any ancestor DensityScope; if neither is set, the control sits on the Comfortable rung — which is where shadcn's own default sits as of 5.0, one step below the pre-5.0 Lumeo default. Only the control height shifts between values. |
| Class | string? | — | Additional CSS classes merged onto the control's outer wrapper. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the control's outer wrapper. |
| Block | bool | false | Stretch the control to fill its container — a full-width input between the −/+ buttons — instead of sizing to its content. Use it in form layouts so the field lines up with sibling full-width inputs/selects (the LumeoForm generator sets it). |
Events
| ValueChanged | EventCallback<double?> | Two-way callback for Value. |