COMPONENTBETA

InputMask

A deterministic masked text control with caret-aware editing, Unicode slots, every Angular Forms API and complete visual ownership.

Paste awareSignal Forms readyIME safe

GET STARTED

Import

Import the canonical standalone component from its granular entry point.

import { NeuralInputMask } from '@neural-ng/core/input-mask';

@Component({ imports: [NeuralInputMask] })

Basic phone mask

The model is formatted by default while the native input receives telephone keyboard and autofill hints.

Phone number

Model: Empty

Mask grammar

9 accepts ASCII digits, a accepts Unicode letters and * accepts Unicode letters or numbers. Escape a rule with a backslash.

Date digits

Unicode identity

Escaped nine

Formatted and raw models

Add unmask when your domain stores only slot characters. Semantic completion events always include model, raw and formatted values.

Raw phone model

Raw model: EmptyComplete and incomplete events appear here.

Editing and incomplete policy

Paste, Backspace, Delete, selections and caret position stay aligned to logical mask slots. This example clears a partial value when focus leaves.

Employee code

Paste mixed text or leave the value incomplete and blur.

Angular Forms integration

Signal Forms, Reactive Forms and template-driven Forms use the same FormValueControl<string> contract.

Signal Forms

Empty

Reactive Forms

(212) 555-0198

NgModel

(312) 555-0107

States and Field composition

Field supplies labels, descriptions and shared disabled, readonly, required, invalid, pending, fluid and unstyled state.

Employee code

Two letters followed by four digits.Enter the complete employee code.

Native input configuration

Name, ID, autocomplete, input mode, placeholder and accessibility metadata are forwarded to the real text input. The mask never replaces domain validation.

Contact phone

Unstyled and typed class slots

Unstyled removes NeuralNg visual classes while retaining the native input, mask engine, Forms behavior and stable structural hooks.

INPUTMASK

Accessibility

Masking enhances a real text input and preserves its browser semantics, focus behavior and Forms relationship.

Native semantics

The focus target remains an input type="text". Native disabled, readonly, required, autocomplete, name and form submission behavior stay available.

Names and descriptions

Prefer a visible label through Neural Field. Use ariaLabel only without a visible label; placeholder and mask characters are never label replacements. Field wires hints and errors through aria-describedby.

Keyboard, selection and paste

Typing, selections, Backspace, Delete and paste operate on logical slots without trapping Tab or arrow navigation. IME composition is allowed to finish before normalization.

International input

The a and * slots use Unicode letter and number properties. Numeric 9 deliberately accepts ASCII digits for stable machine-oriented identifiers.

INPUTMASK

API

The complete public contract of canonical NeuralInputMask.

Inputs

Name	Type	Default	Description
value	string	''	Formatted or raw model, according to unmask.
mask	string	''	Deterministic mask grammar.
slotChar	string	'_'	First character used for empty slots.
unmask	boolean	false	Exposes raw slot characters to the model.
showMaskOnFocus	boolean	true	Shows literals and empty slots while focused.
clearIncomplete	boolean	false	Clears a partial value on blur.
disabled	boolean	false	Disables native interaction and Forms control.
readonly	boolean	false	Keeps the value focusable without mutation.
required	boolean	false	Exposes native and ARIA required state.
invalid	boolean	false	Exposes invalid styling and ARIA.
pending	boolean	false	Exposes busy state through aria-busy.
touched	boolean	false	External Forms state hook.
dirty	boolean	false	External Forms state hook.
name	string	''	Native form-control name.
autocomplete	string	'off'	Native autofill purpose.
inputMode	string	'text'	Native virtual keyboard hint.
placeholder	string	''	Native placeholder; never an accessible label.
ariaLabel	string	''	Accessible name outside a visible label.
inputMaskId	string	''	Explicit native input ID outside Field.
fluid	boolean	false	Fills the available inline width.
unstyled	boolean	false	Removes NeuralNg visual classes.
inputMaskClass	string	''	Consumer root class.
inputClass	string	''	Consumer native input class.
classes	NeuralInputMaskClasses	{}	Typed root and input slots.

Events

valueChangestring

Generated model output for every accepted edit.

completeNeuralInputMaskCompleteEvent

All mask slots became complete.

incompleteNeuralInputMaskCompleteEvent

Partial value blurred without clearing.

touchvoid

Native input blurred.

Public methods

focus(options?)

Focuses the native masked input.

select()

Selects the complete displayed value.

reset()

Clears raw, formatted and model values.

Pure utilities

The entry point also exports deterministic formatting helpers for application code and tests.

formatNeuralMask(rawValue, mask, slotChar?)

Formats raw characters with visible slots.

unmaskNeuralValue(value, mask)

Extracts accepted slot characters.

Typed class slots

rootinput

Structural classes remain in unstyled mode. inputMaskClass and inputClass are direct consumer escape hatches.

INPUTMASK

Design tokens

Neutral, dark mode and experimental themes share this complete component-token surface.

Component tokens

Override tokens at component, product boundary or theme scope without changing mask behavior.

--neural-input-mask-width

Control inline size.

--neural-input-mask-input-width

Input inline size.

--neural-input-mask-min-height

Control minimum block size.

--neural-input-mask-padding

Control internal spacing.

--neural-input-mask-color

Control foreground color.

--neural-input-mask-color-hover

Hovered control foreground color.

--neural-input-mask-color-focus

Focused control foreground color.

--neural-input-mask-color-readonly

Readonly control foreground color.

--neural-input-mask-caret-color

Control text caret color.

--neural-input-mask-background

Control background surface.

--neural-input-mask-background-hover

Hovered control background surface.

--neural-input-mask-background-focus

Focused control background surface.

--neural-input-mask-background-readonly

Readonly control background surface.

--neural-input-mask-border

Control border shorthand.

--neural-input-mask-border-color-hover

Hovered control border color.

--neural-input-mask-border-color-focus

Focused control border color.

--neural-input-mask-border-color-invalid

Invalid control border color.

--neural-input-mask-radius

Control corner radius.

--neural-input-mask-shadow

Control box shadow.

--neural-input-mask-shadow-focus

Focused control box shadow.

--neural-input-mask-shadow-invalid

Invalid control box shadow.

--neural-input-mask-focus-ring

Control keyboard focus ring.

--neural-input-mask-focus-ring-offset

Control focus ring offset.

--neural-input-mask-placeholder-color

Placeholder foreground color.

--neural-input-mask-placeholder-opacity

Placeholder opacity.

--neural-input-mask-disabled-opacity

Disabled opacity.

--neural-input-mask-font-family

Control font family.

--neural-input-mask-font-size

Control font size.

--neural-input-mask-line-height

Control line height.

--neural-input-mask-transition

Control CSS transition.

Primary

Surface

InputMask

Import

Basic phone mask

Mask grammar

Formatted and raw models

Editing and incomplete policy

Angular Forms integration

States and Field composition

Native input configuration

Unstyled and typed class slots

Accessibility

Native semantics

Names and descriptions

Keyboard, selection and paste

International input

API

Inputs

Events

Public methods

Pure utilities

Typed class slots

Design tokens

Component tokens

Import

Basic phone mask

Mask grammar

Formatted and raw models

Editing and incomplete policy

Angular Forms integration

States and Field composition

Native input configuration

Unstyled and typed class slots

Native semantics

Names and descriptions

Keyboard, selection and paste

Validation state

International input

Inputs

Events

Public methods

Pure utilities

Typed class slots

Component tokens