NumberInput

Usage

The model is number | null, never formatted text. formatOptions controls locale, decimal digits and optional currency. min/max bound accepted values; step controls the steppers. inputDetail distinguishes valid, incomplete and invalid editing text without replacing the committed model.

Examples

Interact with the example and open Code for its complete implementation.

25

Try and configure

Change the controls and try the live preview. Expand the application value or event to inspect its real data; the generated template stays with the configurator.

25

<neu-number-input
  [(value)]="number"
  [min]="0"
  [max]="100"
  [step]="1"
  layout="stacked"
  size="md"
  [formatOptions]="formatOptions"
  [floatingLabel]="true"
  [label]="'Quantity'"
/>

import { signal } from '@angular/core';

export const number = signal(25);

export const formatOptions = {
  "locale": "en-US",
  "style": "decimal",
  "maximumFractionDigits": 2
};

Signal Forms

Bind FormField once to the component; the field owns value and validation. The schema requires a non-empty value. Leave the control to mark it touched, then reset the field to clear both value and interaction state.

Signal Forms guide

{
  "field": null
}

Value and events

Use [(value)] or [value] with (valueChange), not both. The model synchronizes application state; other Outputs communicate their documented events. touch reports leaving/visiting the control, not a new value.

Accessibility and keyboard

Associate label with the number field. Name both stepper buttons with incrementLabel/decrementLabel. ArrowUp/ArrowDown changes step; Home/End uses configured bounds. Explain invalid or incomplete text with a message rather than color alone.

API

Inputs, models and Outputs come from the pinned Core contract. Click named types to open their definitions. This component has no public template slots.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuNumberInputState } from '@neural-ui/core/number-input';

import type { NeuNumberInputDetail } from '@neural-ui/core/number-input';

// Public declaration (reference only)
export interface NeuNumberInputDetail {
  readonly rawText: string;
  readonly state: NeuNumberInputState;
  readonly value: number | null;
}

import type { NeuNumberInputFormatOptions } from '@neural-ui/core/number-input';

// Public declaration (reference only)
export type NeuNumberInputFormatOptions = (NeuNumberInputFormatBase & {
    readonly style?: 'decimal';
    readonly currency?: never;
}) | (NeuNumberInputFormatBase & {
    readonly style: 'currency';
    readonly currency: string;
});

import type { NeuNumberInputLayout } from '@neural-ui/core/number-input';

// Public declaration (reference only)
export type NeuNumberInputLayout = 'horizontal' | 'stacked' | 'vertical';

import type { NeuNumberInputState } from '@neural-ui/core/number-input';

// Public declaration (reference only)
export type NeuNumberInputState = 'valid' | 'incomplete' | 'invalid';

Styles and tokens

Load Core styles once. Use the public tokens below for local customization or a preset for application-wide changes. Keep labels, focus, selected options and disabled states readable in both light and dark themes.

Related components

Use the related controls for a different kind of value or interaction.

• InputMask
• InputOTP
• InputTags