A password field with a show/hide toggle. It is a ControlValueAccessor — bind formControlName, ngModel, or [formField] on ply-password-input itself. Do not wrap it in another ply-input-group.
Playground
<ply-password-input label="Password" placeholder="••••••••" autocomplete="current-password">Password Input</ply-password-input>
Pass an optional label. Project ply-error for validation. Set [showStrength] to include the meter.
<ply-password-input label="Password" [(ngModel)]="password" [showStrength]="true"> </ply-password-input>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add password-input
// Paths are relative to aliases.components (default: src/app/components)
import { PasswordInputComponent } from './password-input/password-input.component';
@Component({
selector: 'app-password-input-example',
imports: [
PasswordInputComponent
],
template: `...`
})
export class PasswordInputExampleComponent {}Install
npx ply-ui-cli add password-input
Project ply-error. The red border and message appear after the field is touched.
<ply-password-input label="Password" formControlName="password"> <ply-error>Password is required</ply-error> </ply-password-input>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add password-input
// Paths are relative to aliases.components (default: src/app/components)
import { PasswordInputComponent } from './password-input/password-input.component';
@Component({
selector: 'app-password-input-example',
imports: [
PasswordInputComponent
],
template: `...`
})
export class PasswordInputExampleComponent {}Install
npx ply-ui-cli add password-input
Run the following command to add this component to your project:
npx ply-ui-cli add password-input
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add password-input
// Paths are relative to aliases.components (default: src/app/components)
import { PasswordInputComponent } from './password-input/password-input.component';
@Component({
selector: 'app-your-component',
imports: [
PasswordInputComponent
],
template: `...`
})
export class YourComponent {} API for password-input — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-password-input | class | string | '' | Additional host CSS classes (merged via cn()). |
ply-password-input | label | string | '' | — |
ply-password-input | placeholder | unknown | '••••••••' | — |
ply-password-input | autocomplete | unknown | 'current-password' | — |
ply-password-input | name | string | '' | — |
ply-password-input | showStrength | boolean | false | — |
ply-password-input | disabled | boolean | false | — |
Content