Input Mask | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Find your reservation

Use a masked booking reference to reveal a local sample reservation. The mask formats characters; it does not look up or validate a booking on a server.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuInputMaskComponent } from '@neural-ui/native/input-mask';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuInputMaskComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Find your reservation</text><text class="product-caption">Six digits, one clear format</text></view>
    <view class="product-surface"><neu-input-mask label="Booking reference" mask="###-###" keyboardType="numeric" [(value)]="reference" />
    <text class="product-caption">You will find the reference in your confirmation email.</text>
    <view class="product-actions"><neu-button label="Preview reservation" size="sm" [disabled]="reference().replaceAll('-', '').length !== 6" (pressed)="found.set(reference())" /></view></view>
    @if (found()) { <neu-card title="Friday team lunch" description="Neural Studio · 4 guests" variant="outlined"><text class="product-caption">{{ found() }}</text></neu-card> }</view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly reference = signal('');
  readonly found = signal('');
}

Phone number

Type ten digits to apply the phone separators automatically.

View and copy the complete example

phone-number.component.ts

import { Component, signal } from '@angular/core';
import { NeuInputMaskComponent } from '@neural-ui/native/input-mask';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuInputMaskComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-input-mask label="Contact phone" mask="(###) ###-####" keyboardType="phone-pad" [(value)]="phone" hint="Use ten digits." /><text class="usage-caption">Stored phone: {{ phone() }}</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly phone = signal('');
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Input Mask · android · native capture — **Android**Native screenshot

Input Mask · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
mask	string	Required	Input	Formatting pattern: # accepts a digit, A a Latin letter and * a letter or digit. Literal separators remain visible; the empty field shows underscores for editable positions.
keyboardType	"default" \| "numeric" \| "phone-pad"	'default'	Input	Keyboard layout requested from the platform. It does not replace a validation rule.
label	string	Required	Input	Human-readable name for the control, action or group.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
readonly	boolean	false	Input	Prevents user editing or selection while retaining the current value.
invalid	boolean	false	Input	Marks the control invalid. Your form or application supplies the validation rule.
touched	boolean	false	Input	Field interaction state, supplied manually or through Signal Forms.
hint	string	''	Input	Field guidance shown when no error message is being displayed.
required	boolean	false	Input	Required-field presentation. Define the actual validation rule in your application form.
requiredLabel	string	'Required'	Input	Localized requirement announced with the field hint when required is true. Defaults to Required; it does not validate the value.
error	string	''	Input	Application-provided error message; combine it with the control’s invalid state.

Models

Name	Type	Default	Binding	Description
value	string	''	Model · two-way	Raw accepted characters, without literal mask separators. # accepts digits, A letters and * alphanumeric characters. The empty-field guide is never stored in the model; bind the raw string with [(value)].

Outputs

Name	Payload	When it emits
valueChange	string	Emits the updated value value. [(value)] binds this output together with its model input.
touch	void	Reports user interaction to the surrounding form or application.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

// Fields inside your component class
readonly value = signal<string>('');