Number Input
Numeric input with +/- stepper buttons. Min/Max/Step constraints, prefix/suffix slots, ArrowUp/Down keyboard nav. Value is decimal — works for currency, quantity, dosage.
Basic — quantity
Min / Max constraints
The simplest case: a positive integer with stepper buttons.
Value: 1
razor
<NumberInput Value="@_qty"
ValueChanged="@((decimal v) => _qty = v)"
Min="1"
Max="999"
Label="Quantity" />Currency — prefix slot
Decimal step + Prefix
Pass Step="0.01m" for cent-precision and a Prefix string to render "$" inside the field.
$
Value: $19.99
razor
<NumberInput Value="@_price"
ValueChanged="@((decimal v) => _price = v)"
Min="0"
Step="0.01m"
Prefix="$"
Label="Unit price" />Dosage — suffix slot
Fractional Step + Suffix unit
Step="0.5m" for half-unit precision; Suffix renders "mg" on the right edge.
mg
Adjust in 0.5 mg increments.
razor
<NumberInput Value="@_dose"
ValueChanged="@((decimal v) => _dose = v)"
Min="0"
Max="500"
Step="0.5m"
Suffix="mg"
Label="Dosage"
HintText="Adjust in 0.5 mg increments." />Sizes
xs / sm / md / lg
razor
<NumberInput Size="xs" Value="@v" ValueChanged="@((decimal x) => v = x)" Label="xs" />
<NumberInput Size="sm" Value="@v" ValueChanged="@((decimal x) => v = x)" Label="sm" />
<NumberInput Size="md" Value="@v" ValueChanged="@((decimal x) => v = x)" Label="md" />
<NumberInput Size="lg" Value="@v" ValueChanged="@((decimal x) => v = x)" Label="lg" />