Number Input

import { Component } from '@angular/core';
import { WrInputNumber } from 'ngwr/input-number';

@Component({ imports: [WrInputNumber] })
export class MyComponent {}

<wr-input-number [(value)]="value" />

<wr-input-number [(value)]="value" [min]="0" [max]="100" [step]="5" />

<wr-input-number [(value)]="price" prefix="$" [decimals]="2" />

<wr-input-number [(value)]="weight" suffix="kg" [decimals]="1" [step]="0.1" />

<wr-input-number [(value)]="value" [showSteppers]="false" />

An emptied field is null, not 0.
A value set from outside [min] / [max] is kept as is. Flag it with Validators.max.
With [formField], set the bounds with the schema's min() / max().

Name	Description	Type	Default
`min`	Minimum allowed value.	`number \| undefined`	`-Infinity`
`max`	Maximum allowed value.	`number \| undefined`	`Infinity`
`step`	Step used by stepper buttons + arrow keys.	`number`	`1`
`decimals`	Fixed number of decimals. Rounds the value as it is COMMITTED, and fixes the digits shown once the field reformats on blur. `null` keeps the entered precision and formats with up to 20. Clamped to 0–100, the range `Intl.NumberFormat`'s `minimumFractionDigits` / `maximumFractionDigits` accept — because it is the one numeric input on this component that had no transform, and the value goes straight into the formatter, which THROWS a `RangeError` outside that range rather than degrading. A `[decimals]="-1"` bound from a config object took the whole component down on blur.	`number \| null`	`null`
`showSteppers`	Render the ▲▼ stepper column.	`boolean`	`true`
`size`	Control size — forwarded to the field's `[size]`, and shares the `--wr-control-*` contract.	`WrInputSize`	`'md'`
`rounded`	Pill-shaped corners — forwarded to the group AND the field.	`boolean`	`false`
`prefix`	Optional prefix label (e.g. `"$"`).	`string`	`''`
`suffix`	Optional suffix label (e.g. `"kg"`).	`string`	`''`
`placeholder`	Placeholder shown when the input is empty.	`string`	`''`
`ariaLabel`	Accessible name for the field. Unset, the field is named by whatever labels it — there is deliberately no fallback here. It used to mirror the `placeholder`, and an `aria-label` OUTRANKS a `<label>` in the accname order: inside a `<wr-form-field label="Quantity">` the very input that adopts the field's id announced the placeholder ("0") instead, and a placeholder disappears as soon as the user types. Standalone nothing was lost by dropping it — an input with no other name already falls back to its own `placeholder` attribute, which is the name axe's `label` rule accepts too.	`string \| null`	`null`
`incrementLabel`	Increment button aria-label. Falls back to `inputNumber.increment`.	`string \| null`	`null`
`decrementLabel`	Decrement button aria-label. Falls back to `inputNumber.decrement`.	`string \| null`	`null`
`disabled`	Disable interaction.	`boolean`	`false`
`readonly`	Read-only — values cannot be changed (steppers + typing disabled).	`boolean`	`false`
`value`	Numeric value (`null` when empty). Bound by `[formField]`, or two-way via `[(value)]`.	`number \| null`	`null`
`(touch)`	Emitted on blur so a bound field can mark itself touched.	`void`	—

Variable	Default	Declared on
`--wr-input-number-step-cap-radius`	`var(--wr-border-radius-pill)`	`.wr-input-number`
`--wr-input-number-step-icon-size`	`var(--wr-control-font-size-md)`	`.wr-input-number` +2 variant overrides

Built on	Input
Used by	Schema Form

Installation

Basic

Min / max / step

Prefix and decimals

Suffix and fractional step

Without steppers

Gotchas

API

CSS variables

Dependencies

See also