Password

Enter a password with an optional visibility toggle and strength indicator.

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

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

Usage

Bind value to application state. toggleable adds a show/hide button; showStrength displays client-side guidance, not a security policy. Use autocomplete="new-password" for account creation or "current-password" for sign-in. Never log or echo the password in a status panel.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Password

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Password

Events: 0

disabled

readonly

invalid

floatingLabel

showStrength

toggleable

Advanced options · 15

<neu-password
  [value]="value()"
  (valueChange)="onPasswordChange($event)"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  [floatingLabel]="true"
  [showStrength]="true"
  [toggleable]="true"
  [autocomplete]="'new-password'"
  [hideLabel]="'Hide password'"
  [label]="'Password'"
  [showLabel]="'Show password'"
/>

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 value = 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).

State and events

Accessibility and keyboard

Tab reaches the input and visibility button. Enter/Space activates the button; toggling keeps the same value.

Key	Action
`Tab`	Move between the input and the enabled visibility button.
`Enter`	On the visibility button, show or hide the password without changing its value.
`Space`	On the visibility button, show or hide the password without changing its value.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

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
`autocomplete`	`string`	`'current-password'`	`[autocomplete]`	Native browser autocomplete attribute for the input.
`dirty`	`boolean`	`false`	`[dirty]`	Form state indicating that the user has changed the value.
`disabled`	`boolean`	`false`	`[disabled]`	Prevents interaction with this control.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Validation errors supplied by the form or the application.
`floatingLabel`	`boolean`	`false`	`[floatingLabel]`	Displays the label in the floating-label field style.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the control according to the form state.
`hideLabel`	`string`	`'Hide'`	`[hideLabel]`	Accessible text for the password visibility action.
`inputId`	`string`	`inject(NeuIdGenerator).getId('neu-password-')`Derived default	`[inputId]`	Stable control id, generated when omitted; use it to associate labels or descriptions.
`invalid`	`boolean`	`false`	`[invalid]`	Displays the invalid state; it does not add a validation rule.
`label`	`string`	`''`	`[label]`	Visible label naming the field or action.
`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 of the 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 applied value visible but prevents user edits.
`required`	`boolean`	`false`	`[required]`	Marks the field as required; use a form validator to enforce it.
`showLabel`	`string`	`'Show'`	`[showLabel]`	Accessible text for the password visibility action.
`showStrength`	`boolean`	`false`	`[showStrength]`	Show visual password-strength guidance; it does not enforce a security policy.
`toggleable`	`boolean`	`true`	`[toggleable]`	Show the password visibility button.
`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)]`	Application-owned editable model value.

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

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

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-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-surface-3`	Hover and raised control surfaces	Shared by other Core consumers; scope the override.	`#e2e8f0`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`