Number Field

A numeric input with increment and decrement buttons.

Import

Import the Number Field primitives from ng-primitives/number-field.

import {
  NgpNumberField,
  NgpNumberFieldInput,
  NgpNumberFieldIncrement,
  NgpNumberFieldDecrement,
} from 'ng-primitives/number-field';

Usage

Assemble the number field directives in your template.

<div ngpNumberField>
  <button ngpNumberFieldDecrement>−</button>
  <input ngpNumberFieldInput />
  <button ngpNumberFieldIncrement>+</button>
</div>

Reusable Component

Schematics

Generate a reusable number field component using the Angular CLI.

ng g ng-primitives:primitive number-field

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• example-styles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/number-field package:

NgpNumberField

The root directive that manages the number field state.

Data Attributes

Attribute	Description	Value
data-disabled	Applied when the number field is disabled.	-
data-readonly	Applied when the number field is readonly.	-

NgpNumberFieldInput

Apply to an input element within the number field.

Data Attributes

Attribute	Description	Value
data-disabled	Applied when the number field is disabled.	-
data-readonly	Applied when the number field is readonly.	-
data-hover	Applied when the input is hovered.	-
data-focus-visible	Applied when the input is focused.	-

NgpNumberFieldIncrement

Apply to a button that increments the value.

Data Attributes

Attribute	Description	Value
data-disabled	Applied when incrementing is not possible.	-
data-hover	Applied when the button is hovered.	-
data-focus-visible	Applied when the button is focused.	-
data-press	Applied when the button is pressed.	-

NgpNumberFieldDecrement

Apply to a button that decrements the value.

Data Attributes

Attribute	Description	Value
data-disabled	Applied when decrementing is not possible.	-
data-hover	Applied when the button is hovered.	-
data-focus-visible	Applied when the button is focused.	-
data-press	Applied when the button is pressed.	-

Features

Press-and-Hold Auto-Repeat

Pressing and holding the increment or decrement button will repeatedly change the value. After a 400ms initial delay, the value changes every 60ms. Auto-repeat stops when the pointer is released or when the value reaches the min/max boundary.

Input Validation

Invalid characters are rejected as you type. Only digits, a single decimal point, and a leading minus sign (when min < 0) are allowed. On blur, the value is clamped to the min/max range and snapped to the nearest step.

Floating Point Precision

Stepping operations use precision-aware rounding to avoid floating point issues (e.g., 0.1 + 0.2 correctly produces 0.3).

Dynamic Input Mode

The inputmode attribute is set dynamically based on the configuration:

• numeric — when min >= 0 and step is an integer
• decimal — when min >= 0 and step has decimal places
• text — when negative values are allowed (some mobile keyboards cannot show both minus and decimal)

Accessibility

Adheres to the Spinbutton WAI-ARIA design pattern.

Keyboard Interactions

• Arrow Up: Increase the value by the step.
• Arrow Down: Decrease the value by the step.
• Shift + Arrow Up: Increase the value by the large step.
• Shift + Arrow Down: Decrease the value by the large step.
• Home: Set the value to the minimum (if finite).
• End: Set the value to the maximum (if finite).
• Enter: Commit the typed value.