InputNumber
A locale-aware numeric spinbutton with strict number models, deterministic parsing, currency formatting and complete Angular Forms integration.
GET STARTED
Import
Import the canonical standalone component from its granular entry point.
Decimal input
Editable text is parsed immediately, while application state remains number | null.
Currency
Currency mode uses an ISO 4217 currency code and the active locale. Formatting never leaks into the model.
Locale, grouping and precision
A local locale override controls both display and typed parsing. Grouping and fraction precision remain independent.
Bounds and precise stepping
Blur and Enter clamp to bounds. Arrow keys and buttons step without floating-point drift; bounded buttons disable at their limit.
Prefix, suffix and Neural Icons
Display-only prefix and suffix text preserve the numeric model. Step controls can use the project icon set and explicit accessible names.
Angular Forms integration
All Forms APIs bind the same nullable numeric contract. Signal Forms schema owns validation constraints when formField is used.
States and Field composition
Field provides the visible label, descriptions and shared disabled, readonly, required, invalid, pending, fluid and unstyled states.
Unstyled and typed class slots
Unstyled retains parsing, spinbutton semantics, Forms behavior and structural hooks while consumer classes own every rendered element.
INPUTNUMBER
Accessibility
A real text input exposes the complete ARIA spinbutton contract while allowing locale-aware editing.
Keyboard
Arrow Up/Down step, bounded Home/End jump to limits, Enter commits, and Tab follows the page. No navigation key is trapped unnecessarily.
Naming and states
Prefer Neural Field and a visible label. Required, invalid and pending map to ARIA; readonly remains focusable, while disabled leaves interaction.
Parsing and feedback
Invalid characters are rejected without destroying the previous draft. Partial sign or decimal edits remain possible and are validated on commit.
INPUTNUMBER
API
The complete public contract of canonical NeuralInputNumber.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | null | null | Canonical numeric model; never localized text. |
| min | number | undefined | undefined | Minimum committed value. |
| max | number | undefined | undefined | Maximum committed value. |
| step | number | 1 | Positive keyboard and button increment. |
| mode | 'decimal' | 'currency' | 'decimal' | NumberFormat presentation mode. |
| locale | string | '' | Component-level locale override. |
| currency | string | 'USD' | ISO 4217 code in currency mode. |
| currencyDisplay | Intl currencyDisplay | 'symbol' | Symbol, narrowSymbol, code, or name. |
| prefix | string | '' | Application-owned text before formatted value. |
| suffix | string | '' | Application-owned text after formatted value. |
| useGrouping | boolean | true | Uses locale grouping separators. |
| minFractionDigits | number | null | null | Minimum displayed fraction digits. |
| maxFractionDigits | number | null | null | Maximum displayed fraction digits. |
| showButtons | boolean | true | Renders decrement and increment controls. |
| disabled | boolean | false | Disables control and stepping. |
| readonly | boolean | false | Keeps value focusable without editing. |
| required | boolean | false | Exposes required semantics. |
| invalid | boolean | false | Exposes application invalid state. |
| pending | boolean | false | Exposes busy state. |
| touched | boolean | false | External Forms state hook. |
| dirty | boolean | false | External Forms state hook. |
| fluid | boolean | false | Fills available width. |
| inputId | string | '' | Explicit native input ID. |
| name | string | '' | Native form-control name. |
| autocomplete | string | 'off' | Native autofill purpose. |
| inputMode | string | 'decimal' | Virtual keyboard hint. |
| placeholder | string | '' | Native placeholder. |
| ariaLabel | string | '' | Accessible name without a visible label. |
| incrementAriaLabel | string | '' | Localized increment name override. |
| decrementAriaLabel | string | '' | Localized decrement name override. |
| incrementIconClass | string | '' | Increment Neural Icon class. |
| decrementIconClass | string | '' | Decrement Neural Icon class. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
| inputNumberClass | string | '' | Consumer root class. |
| inputClass | string | '' | Consumer native input class. |
| classes | NeuralInputNumberClasses | {} | Typed visual slots. |
Events
valueChangenumber | nullGenerated model output.
valueCommitNeuralInputNumberCommitBlur, Enter, keyboard, or button commit.
touchvoidNative input blurred.
Methods
stepBy(direction, source)Steps and emits a semantic commit.
commit(source)Parses, clamps, formats, and commits the draft.
focus(options?)Focuses the native input.
select()Selects the editable text.
reset()Clears value and transient parse state.
Typed class slots
rootinputdecrementButtonincrementButtonbuttonIconValue contract
The public value is always finite number | null. Formatted strings, currency symbols, grouping separators, prefix and suffix text never enter application state.
INPUTNUMBER
Design tokens
Neutral, dark mode and experimental themes share the same component-token surface.
Component tokens
--neural-input-number-widthControl inline size.
--neural-input-number-input-widthInput inline size.
--neural-input-number-min-heightControl minimum block size.
--neural-input-number-paddingControl internal spacing.
--neural-input-number-colorControl foreground color.
--neural-input-number-backgroundControl background surface.
--neural-input-number-borderControl border shorthand.
--neural-input-number-border-color-focusFocused control border color.
--neural-input-number-border-color-invalidInvalid control border color.
--neural-input-number-radiusControl corner radius.
--neural-input-number-shadowControl box shadow.
--neural-input-number-shadow-focusFocused control box shadow.
--neural-input-number-focus-ringControl keyboard focus ring.
--neural-input-number-focus-ring-offsetControl focus ring offset.
--neural-input-number-text-alignControl text alignment.
--neural-input-number-button-sizeButton width and height.
--neural-input-number-button-backgroundButton background surface.
--neural-input-number-button-background-hoverHovered button background surface.
--neural-input-number-disabled-opacityDisabled opacity.