Password Input

A password field with a show/hide toggle. It is a ControlValueAccessor — bind formControlName, ngModel, or [formField] on base-password-input itself. Do not wrap it in another base-input-group.

freenew

Password

Playground

label

placeholder

autocomplete

name

showStrength

disabled

HTML

<base-password-input label="Password" placeholder="••••••••" autocomplete="current-password">Password Input</base-password-input>

Basic Usage

Pass an optional label. Project base-error for validation. Set [showStrength] to include the meter.

Password

HTML

<base-password-input
  label="Password"
  [(ngModel)]="password"
  [showStrength]="true">
</base-password-input>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-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

bash

npx base-ui-cli add password-input

Validation

Project base-error. The red border and message appear after the field is touched.

HTML

<base-password-input label="Password" formControlName="password">
  <base-error>Password is required</base-error>
</base-password-input>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-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

bash

npx base-ui-cli add password-input

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add password-input

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-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 reference for password-input
API	Member	Type	Default	Description
`base-password-input`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-password-input`	`label`	`string`	`''`	—
`base-password-input`	`placeholder`	`unknown`	`'••••••••'`	—
`base-password-input`	`autocomplete`	`unknown`	`'current-password'`	—
`base-password-input`	`name`	`string`	`''`	—
`base-password-input`	`showStrength`	`boolean`	`false`	—
`base-password-input`	`disabled`	`boolean`	`false`	—

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 214 components and blocks (124 free), delivered shadcn-style: npx base-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).