Number Input

Number Input is a form control for entering numeric values with optional increase and decrease controls. Use it when users need to type a number or adjust it by a step.

Use it for quantities, limits, thresholds, durations, percentages, ratings, numeric settings, seat counts, day counts, and budget-like numeric values.

Place ngs-number-input inside one ngs-form-field. Use Angular forms with ngModel or formControlName, and use min, max, and step to control allowed values. Use custom increase and decrease templates only when the default controls do not fit the design.

Do not use Number Input for text, phone numbers, OTP codes, currency selection, sliders, display-only KPI values, progress, or charts.

Key Features:

✅ Value Constraints: Set min and max limits for numeric input.
✅ Step Intervals: Define the increment/decrement value for adjustments.
✅ Custom Controls: Use default buttons or provide your own templates for increase/decrease actions.
✅ Form Integration: Works seamlessly with Angular Template-driven and Reactive Forms.

The NgStarter Angular Number Input component lets you capture a numeric form value with typing, stepper controls, min/max limits, and Angular forms integration. Use ngs-number-input inside one ngs-form-field when users need to type a number or adjust it with increase/decrease controls. It includes examples for Basic Number Input, Custom Controls, Min, Max Value, and Number input custom controls.

Basic Number Input

Use a basic number input when a form field needs a numeric value with default increase and decrease controls.

Type Number

Value:

Custom Controls

Use custom controls when the default plus and minus buttons should be replaced with project-specific icons.

Type Number

Min, Max Value

Use min and max when the numeric value must stay within a known range.

Value: 3