Password | Neural Native

Import

component.ts

import { NeuPasswordComponent } from '@neural-ui/native/password';

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.

Protect your workspace

Compare an editable password with its confirmation and reveal it without changing its value. The length check is illustrative; your server owns the actual password policy.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuPasswordComponent } from '@neural-ui/native/password';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuPasswordComponent, 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">Protect your workspace</text><text class="product-caption">A private account starts with a strong password</text></view>
    <view class="product-surface"><neu-password label="Password" hint="Use a unique password for this account" [(value)]="password" (valueChange)="checked.set(false)" [(revealed)]="revealed" />
    <neu-password label="Confirm password" [(value)]="confirmation" (valueChange)="checked.set(false)" />
    <text class="product-caption">Use at least 12 characters in this demonstration.</text>
    <view class="product-actions"><neu-button label="Check passwords" size="sm" [disabled]="password().length < 12 || password() !== confirmation()" (pressed)="checked.set(true)" /></view>
    @if (checked() && password().length >= 12 && password() === confirmation()) { <text class="product-caption" accessibilityLiveRegion="polite">Passwords match. Nothing has been sent or stored.</text> }</view></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 password = signal('');
  readonly confirmation = signal('');
  readonly revealed = signal(false);
  readonly checked = signal(false);
}

Validation

Enter at least eight characters to clear this example length check.

View and copy the complete example

validation.component.ts

import { Component, signal } from '@angular/core';
import { NeuPasswordComponent } from '@neural-ui/native/password';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuPasswordComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-password label="New account password" [(value)]="newPassword" [invalid]="newPassword().length > 0 && newPassword().length < 8" [touched]="true" error="Use at least eight characters." hint="The example checks length only." />
    </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 password = signal('');
  readonly newPassword = signal('short');
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Password · android · native capture — **Android**Native screenshot

Password · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
showLabel	string	'Show password'	Input	Accessible name for the eye button in this state. The button displays an icon, not this text; customize the name for your application language.
hideLabel	string	'Hide password'	Input	Accessible name for the eye button in this state. The button displays an icon, not this text; customize the name for your application language.
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
revealed	boolean	false	Model · two-way	Whether the password value is visible instead of concealed. Bind a writable signal with [(revealed)].
value	string	''	Model · two-way	Current edited value or selected ID(s), using the declared type. Bind a writable signal with [(value)].

Outputs

Name	Payload	When it emits
revealedChange	boolean	Emits the updated revealed value. [(revealed)] binds this output together with its model input.
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 revealed = signal<boolean>(false);
readonly value = signal<string>('');