InputMask

Guide text entry with digit, letter and alphanumeric mask positions.

Category: Forms and selection
Import: @neural-ui/core/input-mask
Selector: neu-input-mask

import { NeuInputMaskComponent } from '@neural-ui/core/input-mask';

Usage

9 accepts a digit, A accepts a letter and * accepts a letter or digit. Other characters are literals. The value is the displayed masked string, including inserted literals. A mask guides editing; use form validators for required length or business rules.

Examples

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

Reference

A accepts letters, 9 accepts digits and * accepts letters or digits. Other characters are literals.

Formatted value

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.

Live preview

Phone

Current application value

Disabled

Read only

Required

Invalid state

Advanced options · 11

Generated template: the options above. The Code tab contains the imports and state.

<neu-input-mask
  [(value)]="text"
  mask="999 999 999"
  [label]="'Phone'"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

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

export const text = signal("");

Data, callback and structured configuration inputs

These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.

errors · readonly ValidationError.WithOptionalFieldTree[]

In Source: define errors with this type and use [errors]="errors" (or errors() for a signal).

pattern · readonly RegExp[]

In Source: define pattern with this type and use [pattern]="pattern" (or pattern() for a signal).

Signal Forms

Bind FormField once to the component; the field owns value and validation. The schema requires the full eleven-character phone mask. Leave the control to mark it touched, then reset the field to clear both value and interaction state.

Signal Forms guide

Phone

Valid: false

Form value

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

Use a label that describes the value, and a placeholder that shows its expected format. The mask does not replace required or business validation. Keep error text associated through ariaDescribedBy; users can type, paste and correct characters with their normal editing keys.

Key	Action
`Tab`	Enters and leaves the control.
`Typing / Paste`	Fills compatible mask positions.

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.

Name	Type	Default	Template binding	Description
`dirty`	`boolean`	`false`	`[dirty]`	Form state indicating that the user has changed the value.
`disabled`	`boolean`	`false`	`[disabled]`	Prevents user interaction.
`errorMessage`	`string`	`''`	`[errorMessage]`	Visible error message associated with the field.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Validation errors supplied by the form or the application.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the control according to the form state.
`hint`	`string`	`''`	`[hint]`	Help text associated with the field.
`inputId`	`string`	`inject(NeuIdGenerator).getId('neu-input-mask-')`Derived default	`[inputId]`	Stable identifier of the native control; automatically generated when omitted.
`invalid`	`boolean`	`false`	`[invalid]`	Displays the invalid state; it does not add a validation rule.
`label`	`string`	`''`	`[label]`	Visible label and accessible name of the control.
`mask`	`string`	`''`	`[mask]`	Mask grammar: 9 digit, A letter, * alphanumeric; other characters are literal.
`maxLength`	`number \| undefined`	`undefined`	`[maxLength]`	Form-supplied maximum string length. Configure the validator in your form schema.
`minLength`	`number \| undefined`	`undefined`	`[minLength]`	Form-supplied minimum string length. Configure the validator in your form schema.
`name`	`string`	`''`	`[name]`	Name associated with the native form control.
`pattern`	`readonly RegExp[]`	`[]`	`[pattern]`	Form-supplied regular-expression validation constraints.
`pending`	`boolean`	`false`	`[pending]`	Form state indicating that asynchronous validation is pending.
`placeholder`	`string`	`''`	`[placeholder]`	Text shown when the field has no selected value.
`readonly`	`boolean`	`false`	`[readonly]`	Keeps the control focusable and readable without accepting edits.
`required`	`boolean`	`false`	`[required]`	Marks the field as required; use a form validator to enforce it.
`touched`	`boolean`	`false`	`[touched]`	Form state indicating that the control has been visited.

Models

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

Name	Type	Default	Template binding	Description
`value`	`string`	`''`	`[(value)]`	Single committed string, synchronized through valueChange.

Outputs

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

Name	Payload	Template binding	Description
`touch`	`void`	`(touch)="onTouch($event)"`	Notifies the form that the control has been touched; not a value change.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

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.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-radius`	Control corner radius	Shared by other Core consumers; scope the override.	`8px`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-transition`	Timing of state changes	Shared by other Core consumers; scope the override.	`200ms ease`