@kit-ng-ui/input-number

A numeric input control with steppers, min/max clamping, precision, and an optional formatter / parser pair for currency-style display.

Install

pnpm add @kit-ng-ui/input-number @kit-ng-ui/core @kit-ng-ui/icons @kit-ng-ui/input

The styles inherit the .kit-input shell from @kit-ng-ui/input. Import its stylesheet alongside this one.

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/input/styles' as input;
@use '@kit-ng-ui/input-number/styles' as input-number;

Use

import { Component, signal } from '@angular/core';
import { KitInputNumberComponent } from '@kit-ng-ui/input-number';

@Component({
  standalone: true,
  imports: [KitInputNumberComponent],
  template: `
    <kit-input-number [(value)]="qty" [min]="0" [max]="99" />
    <kit-input-number [step]="0.5" [precision]="2" />
    <kit-input-number
      addonBefore="$"
      [formatter]="fmt"
      [parser]="parse"
      [(value)]="amount"
    />
  `,
})
export class InputNumberDemo {
  qty = signal<number | null>(1);
  amount = signal<number | null>(1234);
  fmt = (n: number | null) => (n == null ? '' : n.toLocaleString('en-US'));
  parse = (s: string) => {
    const n = Number(s.replace(/[^0-9.-]/g, ''));
    return Number.isFinite(n) ? n : null;
  };
}

API

| Input | Type | Default | | -------------- | --------------------------------------------- | ----------- | | value | number \| null | null | | min | number | -Infinity | | max | number | +Infinity | | step | number | 1 | | precision | number \| null | null | | size | 'sm' \| 'md' \| 'lg' | 'md' | | status | 'default' \| 'error' \| 'warning' | 'default' | | disabled | boolean | false | | readonly | boolean | false | | keyboard | boolean (Arrow-Up/Down step) | true | | controls | 'default' \| 'always' \| 'hover' \| 'none' | 'default' | | prefix | string \| null — leading text inside input | null | | suffix | string \| null — trailing text inside input | null | | addonBefore | string \| null — fused outside the input | null | | addonAfter | string \| null — fused outside the input | null | | formatter | (value: number \| null) => string | null | | parser | (input: string) => number \| null | null |

Outputs: (valueChange), (pressEnter).

Implements ControlValueAccessor.

Behavior notes

• The component clamps to [min, max] only on blur or via the stepper buttons. While focused, the raw text is preserved so users can freely type intermediate states (e.g., 12 while typing 123).
• [formatter] is applied for display when not focused. On focus, the raw numeric form is shown so the user can edit. Pair with [parser] to round-trip the displayed value back to a number.
• Arrow-Up / Arrow-Down step by [step]. Disable with [keyboard]="false".
• [precision] rounds values to N decimal places after each step. It does NOT lock typed input — that round happens on blur.