Number Input

<div forNumberInputGroup>
  <button forNumberInputDecrement ariaLabel="Decrease">−</button>
  <input forNumberInput [(value)]="qty" [min]="0" [max]="10" [step]="1" />
  <button forNumberInputIncrement ariaLabel="Increase">+</button>
</div>

<!-- Keyboard-only — no buttons, no group: -->
<input forNumberInput [(value)]="qty" [min]="0" [max]="100" />

Why the group? A <input> is a void element, so the stepper buttons can't be its DOM descendants and therefore can't inject its context directly. [forNumberInputGroup] provides that context and forwards it to the [forNumberInput] registered beneath it. A standalone spinbutton (keyboard / [(value)] only) needs no group.

formatOptions (+ optional locale) drives both the displayed text and aria-valuetext; value() stays a number, and that number is what a surrounding <form> submits (via a hidden input). Committing typed text (Enter or blur) rounds the value to the precision the format displays, so typing 1.239 into the field below commits 1.24, and the text, aria-valuetext, aria-valuenow and the submitted value agree. min / max win over that rounding, and compact, scientific and engineering notations commit the typed value unrounded.

<input
  forNumberInput
  [(value)]="price"
  locale="en-US"
  [formatOptions]="{ style: 'currency', currency: 'USD' }"
/>
<!-- value() === 1234.5 → displayed "$1,234.50", aria-valuenow="1234.5" -->

Percent style needs a matching step. With { style: 'percent' } the model value is the fraction Intl formats from (0.5 displays as "50%"), while step still defaults to 1. Because stepping snaps to the min ?? 0 ± k·step grid, ArrowUp from 0.5 would jump to 1 (100%). Set [step]="0.01" so one arrow press moves one percentage point. step is never derived from formatOptions, so the grid is always exactly what you bind.

Drop the spinbutton inside a [forField] and it auto-associates with the label, description, and error region, with no id / aria-* wiring by hand.

import { Component, signal } from '@angular/core';
import { form, min, required, FormField } from '@angular/forms/signals';
import { ForField, ForFieldError, ForLabel } from 'forty-cdk/field';
import { ForNumberInput } from 'forty-cdk/number-input';

@Component({
  selector: 'demo-order',
  imports: [ForField, ForLabel, ForFieldError, ForNumberInput, FormField],
  template: `
    <div forField>
      <label forLabel>Quantity</label>
      <input forNumberInput [formField]="order.qty" [min]="1" />
      @if (err.shown()) {
        <p forFieldError #err="forFieldError">{{ err.messages().join(', ') }}</p>
      }
    </div>
  `,
})
export class DemoOrder {
  readonly model = signal({ qty: null as number | null });
  readonly order = form(this.model, (o) => {
    required(o.qty, { message: 'Quantity is required' });
    min(o.qty, 1, { message: 'At least one' });
  });
}

ForNumberInput

Stepper buttons

Both [forNumberInputIncrement] / [forNumberInputDecrement] take the uniform ariaLabel input for their accessible name and stay tabindex="-1" (focus belongs on the spinbutton). They reflect [disabled] + data-disabled at the bound (max for increment, min for decrement) or when the control is disabled / read-only. Clicking either button also marks the spinbutton touched. The buttons are outside the tab order, so a pointer-only user would otherwise never blur the input and never engage touched-gated error display.

Set the accessible name with the ariaLabel input (ariaLabel="Increase"), not the native aria-label attribute. Like every forty-cdk primitive, the directive host-binds aria-label from that input and clears it when empty.

[forNumberInputIncrement]:

[forNumberInputDecrement]:

[forNumberInputGroup] is a behavior-only coordination wrapper, so it carries no styling attributes.

The following shortcuts implement the Spinbutton APG keyboard map.

Stepping from an empty field lands on the clamped baseline (min ?? 0).

Values live on the min ?? 0 ± k·step grid. A value already on the grid travels the full amount (step, or step × stepMultiplier for the page keys); a value off the grid (a server-supplied 37.4 with [step]="5", say) lands on the adjacent grid point in the direction of travel and the page multiplier is discarded, exactly as the platform's HTMLInputElement.stepUp() / stepDown() behave. So ArrowUp from 0.55 with [step]="1" gives 1, not 1.55, and one arrow press is all it takes to correct an off-grid value.

Implements the WAI-ARIA Spinbutton pattern.

• role="spinbutton" on a text input. aria-valuenow / aria-valuemin / aria-valuemax reflect the value and bounds; aria-valuetext is emitted only when formatOptions is set (so the formatted text, such as "$1,234.50", is announced instead of the bare number). inputmode is numeric, or decimal when fractional values are possible.
• Clamp on commit, validate on input. Keystrokes update the parsed value live so you can type transient out-of-range text without fighting the caret; clamping to [min, max] happens on blur / Enter / step actions, and blur / Enter also round to the precision formatOptions displays.
• Hidden input for submission. Because the displayed text can be formatted, the visible input does not carry name; setting name mounts a hidden <input> with the raw number so native <form> serialization sees the value, not "$1,234.50". A disabled control is skipped automatically.
• Disabled reflects through one channel. The native disabled attribute already exposes the unavailable state through HTML-AAM, so no aria-disabled is emitted alongside it. Style the disabled state with :disabled or [data-disabled].
• Falsy state styling selects on absence. aria-readonly / aria-required / aria-invalid / aria-busy are emitted only when truthy, so style the off state with :not([aria-invalid]), never [aria-invalid="false"].
• @angular/forms is an optional peer. If you're not using Signal Forms, don't install it: the directive runs fine on a plain [(value)] binding (the only @angular/forms/signals reference is a type import, erased at build).

forty-cdk ships no styles: put your own class on each piece and key your CSS off the data-* attributes listed under API, not off the for* selectors (Styling forty-cdk explains why).

.step-btn[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

Wrapping form primitives documents both supported wrapper patterns: hostDirectives with the exported FOR_NUMBER_INPUT_HOST_DIRECTIVE_INPUTS / FOR_NUMBER_INPUT_HOST_DIRECTIVE_OUTPUTS name tuples, and subclassing.