InputMask
A deterministic masked text control with caret-aware editing, Unicode slots, every Angular Forms API and complete visual ownership.
GET STARTED
Import
Import the canonical standalone component from its granular entry point.
Basic phone mask
The model is formatted by default while the native input receives telephone keyboard and autofill hints.
Mask grammar
9 accepts ASCII digits, a accepts Unicode letters and * accepts Unicode letters or numbers. Escape a rule with a backslash.
Formatted and raw models
Add unmask when your domain stores only slot characters. Semantic completion events always include model, raw and formatted values.
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.
Angular Forms integration
Signal Forms, Reactive Forms and template-driven Forms use the same FormValueControl<string> contract.
States and Field composition
Field supplies labels, descriptions and shared disabled, readonly, required, invalid, pending, fluid and unstyled state.
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.
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.
Validation state
invalid, required and pending map to ARIA state. Completion is an editing event, not proof that the value is valid for your domain.
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
valueChangestringGenerated model output for every accepted edit.
completeNeuralInputMaskCompleteEventAll mask slots became complete.
incompleteNeuralInputMaskCompleteEventPartial value blurred without clearing.
touchvoidNative 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-widthControl inline size.
--neural-input-mask-input-widthInput inline size.
--neural-input-mask-min-heightControl minimum block size.
--neural-input-mask-paddingControl internal spacing.
--neural-input-mask-colorControl foreground color.
--neural-input-mask-color-hoverHovered control foreground color.
--neural-input-mask-color-focusFocused control foreground color.
--neural-input-mask-color-readonlyReadonly control foreground color.
--neural-input-mask-caret-colorControl text caret color.
--neural-input-mask-backgroundControl background surface.
--neural-input-mask-background-hoverHovered control background surface.
--neural-input-mask-background-focusFocused control background surface.
--neural-input-mask-background-readonlyReadonly control background surface.
--neural-input-mask-borderControl border shorthand.
--neural-input-mask-border-color-hoverHovered control border color.
--neural-input-mask-border-color-focusFocused control border color.
--neural-input-mask-border-color-invalidInvalid control border color.
--neural-input-mask-radiusControl corner radius.
--neural-input-mask-shadowControl box shadow.
--neural-input-mask-shadow-focusFocused control box shadow.
--neural-input-mask-shadow-invalidInvalid control box shadow.
--neural-input-mask-focus-ringControl keyboard focus ring.
--neural-input-mask-focus-ring-offsetControl focus ring offset.
--neural-input-mask-placeholder-colorPlaceholder foreground color.
--neural-input-mask-placeholder-opacityPlaceholder opacity.
--neural-input-mask-disabled-opacityDisabled opacity.
--neural-input-mask-font-familyControl font family.
--neural-input-mask-font-sizeControl font size.
--neural-input-mask-line-heightControl line height.
--neural-input-mask-transitionControl CSS transition.