Live demo — this example is server-driven; run the showcase locally for the interactive version.

Number input

A number input with explicit + / − buttons. Friendlier than a raw <input type="number"> for incrementing — fingers on touch, less mis-typing.

Examples

Default

Minus / input / plus.

With unit

A unit label after the controls.

hours

With unit and thresholds

Buttons disable at the min/max bounds.

Disabled

All controls disabled.

With status

Negative errors, zero warns, positive succeeds — live.

Varying sizes

Input widths sized to the expected value length.

Custom increment/decrement

Steps of 3.

Custom increment/decrement and thresholds

Steps of 3 clamped to 0–12.

Documentation

Number input props

Parameters accepted by {#include components/forms/number-input ... /}. Model mode: pass numberInput=<NumberInput> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id.
* `value`	Number	Initial numeric value.
`min` / `max`	Number	Bounds. Default unbounded. When set, the +/− buttons disable at the limit.
`unit`	String	Trailing unit label (e.g. "hours").
`disabled`	boolean	Disables input + both buttons.

Usage

Stepping vs. picking. Use number input when the user adjusts a value up/down (quantity, age, count). For free-form numbers (price, weight) a plain type="number" text-input may be friendlier.

Edit number-input.html on GitHub