FORMSBETA

Password

A password-manager friendly native control with accessible visibility, strength feedback, Caps Lock awareness and one value contract across Angular Forms.

✓ Native autofill✓ Signal Forms✓ Headless ready

GET STARTED

Import

Import the canonical standalone control from its granular entry point.

import { NeuralPassword } from '@neural-ng/core/password';

@Component({ imports: [NeuralPassword] })

Current password

current-password is the safe default. Visibility changes input type without disabling autofill or password managers.

New password and feedback

The four-step score is a presentational hint—not a validator or server security policy.

Enter a password

Strength feedback is presentational.

Angular Forms

The same component works with template-driven, reactive and Signal Forms without a second API.

ngModel

Reactive Form

Signal Form

States and constraints

Native length, required, readonly and disabled semantics compose with form-driven invalid, pending, touched and dirty state.

Unstyled and typed classes

Native semantics and structural hooks remain while Tailwind owns every visible choice.

Strong password

ACCESSIBILITY

Secure native semantics

The control keeps native password behavior and gives every supplemental state an accessible channel.

Native input and autofill

The input starts as type=password and preserves name, autocomplete, required, minlength and maxlength. NeuralNg never blocks password managers or paste.

Visibility and announcements

The toggle is a labelled native button with localized show/hide text. Strength and Caps Lock feedback remain textual rather than color-only.

Security guidance

Strength scoring is only interface feedback. Enforce password policy in Angular validation and again on the server; never log or include password values in analytics.

API

Public contract

Inputs and models

Name	Type	Default	Purpose
value	model<string>	''	Password value shared by Signals and Angular Forms.
visible	model<boolean>	false	Current plain-text visibility state.
toggleVisibility	boolean	true	Shows the accessible visibility control.
showFeedback	boolean	false	Renders the deterministic strength meter and label.
disabled	boolean	false	Disables input and visibility control.
readonly	boolean	false	Keeps value focusable without allowing edits.
required	boolean	false	Applies native required semantics.
invalid	boolean	false	Exposes invalid visual and ARIA state.
pending	boolean	false	Exposes asynchronous validation state.
touched	boolean	false	Form interaction state.
dirty	boolean	false	Form modification state.
minLength	number \| undefined	undefined	Native minimum length constraint.
maxLength	number \| undefined	undefined	Native maximum length constraint.
name	string	''	Native form and password-manager field name.
autocomplete	string	current-password	Native password-manager autocomplete purpose.
inputMode	string	''	Native virtual keyboard hint.
placeholder	string	''	Input placeholder.
ariaLabel	string	''	Accessible input name when no external label exists.
passwordId	string	generated	Native input ID.
showIconClass	string	nt-eye	Icon used while the value is hidden.
hideIconClass	string	nt-eye-off	Icon used while the value is visible.
showPasswordLabel	string	locale	Visibility control label.
hidePasswordLabel	string	locale	Hide control label.
weakLabel / mediumLabel / strongLabel	string	locale	Component strength-label overrides.
capsLockMessage	string	locale	Caps Lock warning override.
fluid	boolean	false	Fills the available inline size.
unstyled	boolean	false	Removes visual base classes.
passwordClass / inputClass	string	''	Additive root and native-input classes.
classes	NeuralPasswordClasses	{}	Typed additive internal classes.

Events

valueChangestring

Implicit model output.

visibleChangeboolean

Implicit visibility model output.

visibilityChangeboolean

Semantic user visibility event.

strengthChangeNeuralPasswordStrengthChange

Value, score and presentation strength.

touchvoid

First blur/touch interaction.

capsLockChangeboolean

Implicit Caps Lock model output.

Methods

focus(options?)

Focuses the native password input.

select()

Selects the complete native value.

reset(value?)

Resets value and interaction state.

Typed class slots

root

Component root.

inputGroup

Input and toggle frame.

input

Native password input.

toggle

Visibility button.

toggleIcon

Visibility Neural icon.

feedback

Strength feedback wrapper.

meter

Strength meter track.

meterBar

Strength meter fill.

strengthLabel

Localized strength text.

capsLock

Caps Lock message.

DESIGN TOKENS

Password tokens

Every token is verified against the shipped Neutral theme and component CSS.

--neural-password-width

Password inline size.

--neural-password-input-width

Password input inline size.

--neural-password-min-height

Password minimum block size.

--neural-password-padding

Password internal spacing.

--neural-password-color

Password foreground color.

--neural-password-color-readonly

Readonly password foreground color.

--neural-password-caret-color

Password text caret color.

--neural-password-background

Password background surface.

--neural-password-border

Password border shorthand.

--neural-password-border-color-focus

Focused password border color.

--neural-password-border-color-invalid

Invalid password border color.

--neural-password-radius

Password corner radius.

--neural-password-shadow

Password box shadow.

--neural-password-shadow-focus

Focused password box shadow.

--neural-password-shadow-invalid

Invalid password box shadow.

--neural-password-focus-ring

Password keyboard focus ring.

--neural-password-focus-ring-offset

Password focus ring offset.

--neural-password-placeholder-color

Password placeholder foreground color.

--neural-password-placeholder-opacity

Password placeholder opacity.

--neural-password-toggle-size

Password toggle width and height.

--neural-password-toggle-color

Password toggle foreground color.

--neural-password-toggle-color-hover

Hovered password toggle foreground color.

--neural-password-toggle-background

Password toggle background surface.

--neural-password-toggle-background-hover

Hovered password toggle background surface.

--neural-password-meter-background

Password meter background surface.

--neural-password-meter-height

Password meter block size.

--neural-password-meter-radius

Password meter corner radius.

--neural-password-strength-weak

Indicator color used for a weak password score.

--neural-password-strength-medium

Indicator color used for a medium password score.

--neural-password-strength-strong

Indicator color used for a strong password score.

--neural-password-message-color

Password message foreground color.

--neural-password-message-font-size

Password message font size.

--neural-password-disabled-opacity

Password disabled opacity.

--neural-password-transition

Password CSS transition.

--neural-password-meter-transition

Password meter CSS transition.

Primary

Surface