# Password
Use `ui-password` for sign-in, reset, and credential-management flows where masked entry, reveal actions, and password-manager compatibility matter. It inherits the shared field API for labels, help text, size, variant, readonly, disabled, and validation messaging while adding password-specific affordances.
## Import
```ts
import { PasswordComponent } from 'ui';
```
## Basic password fields
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { PasswordComponent } from 'ui';
@Component({
selector: 'app-password-basic-demo',
standalone: true,
imports: [FormsModule, PasswordComponent],
template: `
Sign-in password
Good default for login and short verification steps.
Pre-filled secure value
Reveal and clear actions are built in when the field is editable.
`,
})
export class PasswordBasicDemoComponent {
protected savedPassword = 'P@ssword-2026';
}
```
## Layout, size, and variant
```ts
import { Component } from '@angular/core';
import { PasswordComponent } from 'ui';
@Component({
selector: 'app-password-layout-demo',
standalone: true,
imports: [PasswordComponent],
template: `
Prominent credential step
`,
})
export class PasswordLayoutDemoComponent {}
```
## Autocomplete and reveal behavior
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { PasswordComponent } from 'ui';
@Component({
selector: 'app-password-autocomplete-demo',
standalone: true,
imports: [FormsModule, PasswordComponent],
template: `
`,
})
export class PasswordStrengthDemoComponent {
protected password = '';
protected get checks() {
return [
{ label: '8+ characters', passed: this.password.length >= 8 },
{ label: 'Uppercase', passed: /[A-Z]/.test(this.password) },
{ label: 'Number', passed: /\d/.test(this.password) },
{ label: 'Special character', passed: /[^A-Za-z0-9]/.test(this.password) },
];
}
protected get strengthSegments(): number {
return this.checks.filter(check => check.passed).length;
}
protected get strengthColor(): string {
if (this.strengthSegments <= 1) {
return 'var(--color-shared-red-foreground)';
}
if (this.strengthSegments <= 3) {
return 'var(--color-shared-orange-foreground)';
}
return 'var(--color-shared-green-foreground)';
}
protected get strengthLabel(): string {
if (!this.password) {
return 'Not started';
}
if (this.strengthSegments <= 1) {
return 'Weak';
}
if (this.strengthSegments <= 3) {
return 'Medium';
}
return 'Strong';
}
protected get strengthErrorText(): string {
if (!this.password || this.strengthSegments >= 4) {
return '';
}
return 'Add length, uppercase, numbers, and symbols before saving.';
}
protected get strengthHelpText(): string {
if (!this.password) {
return 'Use at least 8 characters, uppercase, numbers, and symbols.';
}
if (this.strengthSegments <= 1) {
return 'Weak password.';
}
if (this.strengthSegments <= 3) {
return 'Almost there. Add one more requirement.';
}
return 'Strong password.';
}
protected useExample(value: string): void {
this.password = value;
}
}
```
## Confirmation and matching
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonComponent, PasswordComponent } from 'ui';
@Component({
selector: 'app-password-confirmation-demo',
standalone: true,
imports: [ButtonComponent, PasswordComponent, ReactiveFormsModule],
template: `
`,
})
export class PasswordConfirmationDemoComponent {
protected readonly passwordForm = new FormGroup({
password: new FormControl('', {
nonNullable: true,
validators: [Validators.required, Validators.minLength(8)],
}),
confirmPassword: new FormControl('', {
nonNullable: true,
validators: [Validators.required],
}),
});
protected get passwordError(): string {
const control = this.passwordForm.controls.password;
if (!control.touched && !control.dirty) {
return '';
}
if (control.hasError('required')) {
return 'Password is required.';
}
if (control.hasError('minlength')) {
return 'Use at least 8 characters.';
}
return '';
}
protected get confirmError(): string {
const control = this.passwordForm.controls.confirmPassword;
if (!control.touched && !control.dirty) {
return '';
}
if (control.hasError('required')) {
return 'Confirm the password.';
}
if (control.value && control.value !== this.passwordForm.controls.password.value) {
return 'Passwords do not match.';
}
return '';
}
protected get confirmHelpText(): string {
const confirmValue = this.passwordForm.controls.confirmPassword.value;
if (!confirmValue) {
return 'Repeat the password exactly.';
}
return confirmValue === this.passwordForm.controls.password.value
? 'Passwords match.'
: 'The value must match the first field.';
}
protected markTouched(): void {
this.passwordForm.markAllAsTouched();
}
protected fillExample(): void {
this.passwordForm.setValue({
password: 'TeamPortal2026!',
confirmPassword: 'TeamPortal2026!',
});
this.passwordForm.markAllAsTouched();
}
}
```
## Reset panel composition
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonComponent, PasswordComponent } from 'ui';
@Component({
selector: 'app-password-reset-panel-demo',
standalone: true,
imports: [ButtonComponent, PasswordComponent, ReactiveFormsModule],
template: `
`,
})
export class PasswordResetPanelDemoComponent {
protected readonly defaults = {
currentPassword: '',
newPassword: '',
confirmPassword: '',
};
protected readonly resetForm = new FormGroup({
currentPassword: new FormControl(this.defaults.currentPassword, {
nonNullable: true,
validators: [Validators.required],
}),
newPassword: new FormControl(this.defaults.newPassword, {
nonNullable: true,
validators: [Validators.required, Validators.minLength(8)],
}),
confirmPassword: new FormControl(this.defaults.confirmPassword, {
nonNullable: true,
validators: [Validators.required],
}),
});
protected get confirmError(): string {
const confirmValue = this.resetForm.controls.confirmPassword.value;
if (!confirmValue) {
return '';
}
return confirmValue === this.resetForm.controls.newPassword.value
? ''
: 'Passwords do not match.';
}
protected get confirmHelpText(): string {
const confirmValue = this.resetForm.controls.confirmPassword.value;
if (!confirmValue) {
return 'Repeat the new password.';
}
return confirmValue === this.resetForm.controls.newPassword.value
? 'Ready to update.'
: 'Use the same value as the new password field.';
}
}
```
## Accessibility
### Label and name
Prefer a visible `label` so the purpose of the secret is explicit. Help and error text contribute through `aria-describedby`, and `ariaLabel` can be used when no visible label is appropriate.
### Keyboard and field actions
This is a standard text-entry field backed by a native password input. Reveal and clear actions are exposed as separate buttons only when the field is editable.
| Aspect | Behavior |
| --- | --- |
| focus | native password input receives focus |
| typing | native password input behavior |
| reveal action | toggles the input type between `password` and `text` |
| clear action | appears only when the field has a value and is editable |
| readonly / disabled | actions are hidden and direct editing is blocked |
### Autocomplete semantics
Use `autocomplete="current-password"` for sign-in or identity verification and `autocomplete="new-password"` for creation or reset flows. This improves browser autofill and password-manager behavior without changing field layout.