Docs / Components
SensePasswordComponent
Password input from @artificialsenselabs/ui with visibility toggle, optional clear action, and forms CVA support.
Live demo: run nx serve showcase and open /components/password (port 4202).
Overview
Category: Form control. Selector: sense-password. Import: import { SensePasswordComponent } from '@artificialsenselabs/ui';
<sense-password ariaLabel="Password" [(ngModel)]="password" /> Pair with a visible <label for="..."> or set ariaLabel. Use passwordVisibilityChange for visibility analytics — not passwordVisibleChange from the model binding alone.
Inputs & outputs
| API | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | null | null | Accessible name when no visible label is associated. |
toggleMask | boolean | true | Show the show/hide password toggle button. |
showClear | boolean | true | Show clear button when the field has a value. |
passwordVisible | boolean | false | Two-way model for plain-text visibility state. |
passwordVisibilityChange | boolean | — | Emitted when the user toggles visibility. |
cleared | void | — | Emitted when the user clears the field. |
Accessibility
- Pattern:ARIA password input with labelled native
<input type="password">. - Toggle uses
aria-pressedand i18n show/hide labels; icons are decorative. - Clear and toggle buttons use
tabindex="-1"so keyboard users stay in the input.