Password Input for Angular

import { AuiPasswordInput } from '@absoluteui/angular/password-input';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Password Input page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { passwordInput: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { AuiPasswordInput } from '@absoluteui/angular/password-input';

@Component({
  selector: 'app-sign-in',
  imports: [ReactiveFormsModule, AuiPasswordInput],
  template: `<aui-password-input label="Password" [required]="true" [formControl]="password"></aui-password-input>`,
})
export class SignInComponent {
  readonly password = new FormControl('', { nonNullable: true });
}

`<aui-password-input>`

Class AuiPasswordInput; template reference #ref="auiPasswordInput".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Angular forms: implements ControlValueAccessor and Validator; the form value is string. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
`label`	`string`		Required. Visible label (required accessible name).
`hideLabel`	`boolean`	`false`	Visually hide the label.
`name`	`string`		Form field name.
`description`	`string`		Help text, referenced by aria-describedby.
`required`	`boolean`	`false`	Value is required.
`disabled`	`boolean`	`false`	Disabled.
`readOnly`	`boolean`	`false`	Read-only.
`minLength`	`number`		Minimum length (code points).
`maxLength`	`number`		Maximum length; validated, not truncated.
`pattern`	`string`		HTML pattern semantics (anchored, v flag).
`autocomplete`	`PasswordAutocomplete`	`'current-password'`	Password-manager hint. Use new-password on sign-up and change-password forms.
`revealable`	`boolean`	`true`	Show the show/hide toggle.
`clipboard`	`PasswordClipboardPolicy`	`'allow'`	Clipboard policy.
`describedBy`	`readonly string[]`		Extra element ids for aria-describedby (e.g. a strength meter).
`validate`	`(value: string) => string \| null`		Consumer validation; the message must not contain the value.
`icons`	`Partial<PasswordInputIcons>`		Icon slot overrides.
`validationTiming`	`ValidationTiming`	`'blur'`	When validation messages first appear; afterwards they update live.
`capsLockWarning`	`boolean`	`true`	Show a warning while Caps Lock is on and the field has focus.
`locale`	`string`	`'en-US'`	Message locale.

Two-way bindings

Model	Type	Change output	Description
`[(value)]`	`string`	`(valueChange)`	The value: `[(value)]` without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
`(valueInput)`	`PasswordInputValueDetail`	User edited the value (the value is not in the detail). Re-emits `aui-input`.
`(changed)`	`PasswordInputValueDetail`	User committed the value (native change). Re-emits `aui-change`.
`(capsLockChange)`	`PasswordInputCapsLockDetail`	The Caps Lock warning appeared or disappeared. Re-emits `aui-caps-lock`.

Read-only state

Property	Type	Description
`revealed`	`Signal<boolean>`	Password shown as text.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`getFormValue(): string \| undefined`	The value.
`setRevealed(revealed: boolean): void`	Show or mask the password.
`reportValidity(): boolean \| undefined`	Show messages now (marks the control submitted) and return validity.
`setCustomError(message: string \| null): void`	External error (server, cross-field rule); null clears it.
`focus(): void`	Move focus to the primary focusable element.
`reset(): void`	Restore the initial value and clear dirty/touched/submitted state.