Text & number input

AppNumberInput

A numeric field with ±/step stepper buttons, min/max clamping, precision rounding, and keyboard stepping (Arrow Up/Down).

<app-number-input label="Quantity" name="qty" min="0" max="100" />

<app-number-input> is the field for any number: quantities, prices, ratings, percentages. It combines a text input (supporting free typing and parsing) with stepper buttons (−/+) that increment/decrement by a step value, clamped to min/max bounds.

Keyboard support is built-in: ArrowUp / ArrowDown step, and on blur the typed value is parsed, rounded to the specified precision, and clamped. The stepper buttons disable at the min/max bounds or when the field is disabled, so a user can't overshoot.

Its look comes entirely from the shared @webority/theme, so the Razor <app-number-input> and the React <AppNumberInput> render identically — a field is a field on every Webority surface.

Playground

Every meaningful attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the field above it.

<app-number-input label="Quantity" name="pg-number" value="10" />
The playground preview is staticEvery change here re-submits the form and re-renders the tag helper from scratch — the stepper buttons and typing still work (the shared client behaviour is wired regardless), but they won't update the value control above. See the Validation and Disabled sections below for the same states, and try the live field directly in this playground to feel the stepping and clamping.

Basic usage

A simple quantity field with no bounds. The stepper increments by 1 by default.

Quantity field
Show code 
<app-number-input label="Quantity" name="qty" value="10" />

Min / max and step

Clamp values to a range and control the increment. The stepper buttons disable at the bounds.

Rating with bounds
Show code 
<app-number-input label="Rating" name="rating" value="7" min="0" max="10" step="1" />

Decimal values

Use precision to round to a specific number of decimal places. The input automatically gets inputmode="decimal" for an on-screen decimal keypad.

Price field with 2 decimals
Show code 
<app-number-input label="Price" name="price" value="19.99" precision="2" step="0.01" />

Unit suffix

A unit suffix (e.g. kg, °C, %) rendered inside the field after the input.

Weight with unit
kg
Show code 
<app-number-input label="Weight" name="weight" value="5" unit="kg" />

Sizes

Three control sizes: sm, md (default), and lg.

All sizes
Show code 
<app-number-input label="Small" name="s" value="10" size="sm" />
<app-number-input label="Medium" name="m" value="10" />
<app-number-input label="Large" name="l" value="10" size="lg" />

Label info-tip

A circular info (i) button beside the label — opens a popover on hover/focus. Same help affordance as <app-input>; the caller supplies the content.

Field with a help info-tip
Show code 
<app-number-input
    label="Tolerable risk"
    name="risk"
    value="0.00001"
    precision="6"
    required="true"
    help="The maximum risk the system may tolerate before mitigation is required."
/>

Validation

Mark required, show hints and errors, and disable the field.

With required, hint, and error
Required to proceed
Show code 
<app-number-input
    label="Quantity"
    name="qty"
    value="0"
    required="true"
    hint="Minimum 1 unit"
    error="Required to proceed"
/>

Disabled

Disable the entire field — input and stepper buttons are non-interactive.

Locked field
Show code 
<app-number-input label="Account ID" name="accId" value="12345" disabled="true" />

Full example

All features together: bounds, precision, unit, hint.

Complete numeric field
/10
Rate between 0 and 10
Show code 
<app-number-input
    label="Rating"
    name="rating"
    value="8"
    min="0"
    max="10"
    step="1"
    precision="0"
    unit="/10"
    hint="Rate between 0 and 10"
/>

Interaction

Typing updates the value on change. On blur, the typed value is parsed and rounded. Arrow keys step up/down. Stepper buttons disable at bounds.

Interactive example
Show code 
<app-number-input label="Score" name="score" value="50" min="0" max="100" step="5" precision="0" />

When to use

Use it when

  • Any numeric input: quantities, prices, ratings, percentages.
  • When min/max bounds or precision rounding are important.
  • When keyboard stepping (Arrow Up/Down) would be helpful.
  • When a unit suffix (kg, °C, %) adds clarity.

Reach for something else when

  • Text or email. → AppInput
  • Multiple choice. → AppSelect or AppRadio
  • When free-text input is the only needed mode (buttons would be clutter).

Every option

The whole surface of the component, one cell per value — bounds, precision, unit, and the states a normal example never shows together.

size — every size

size="sm"
size="md"
size="lg"

state

(default)
required
disabled
error + hint (hint hidden)
Required to proceed
hint only
Minimum 1 unit
value="" (empty)

bounds — stepper disable states

value="0" min="0" — decrease disabled
value="10" max="10" — increase disabled
value="" min/max set — both steppers stay enabled
no min/max — steppers never disable

precision — decimal rounding

precision="0"
precision="1"
precision="2"
precision="4"

unit suffix

unit="kg"
kg
unit="°C"
°C
unit="/100" (longer suffix)
/100
(no unit)

Attributes

AttributeTypeDefaultDescription
labelstring—The field label
namestring—The input name attribute for form binding
placeholderstring—Placeholder text inside the input
valuestring—The initial numeric value
requiredbooleanfalseMark the field as required; programmatically enforced with the required-mark and form validation
hintstring—A help message displayed below the input
errorstring—An error message to show (overrides validation messages)
helpstring—Info-tip content shown beside the label (React help)
help-labelstringMore informationaria-label for the info-tip button (React helpLabel)
minnumber—Minimum value (inclusive); stepper disables at this bound
maxnumber—Maximum value (inclusive); stepper disables at this bound
stepnumber1Increment/decrement amount when using the stepper buttons or arrow keys
precisioninteger0Number of decimal places to round to; automatically sets inputmode to "decimal" if > 0
unitstring—A unit suffix (e.g., "kg", "°C", "%") displayed inside the field after the input
disabledbooleanfalseDisable the input and stepper buttons
sizesm | md | lgmdControl size — compact, standard, or large
input-classstring—Extra classes on the input element itself