Components / Password Input
Password Input
Password input with visibility toggle (eye icon) and optional strength meter. Uses zxcvbn-style scoring based on length + character classes.
forms v0.7.0
Playground
Examples
With strength
<cg-password-input label="Password" placeholder="Enter password" show-strength helper="Use 8+ characters with mixed case and numbers" style="max-width:360px;"></cg-password-input>Basic
<cg-password-input label="Current password" placeholder="••••••••" style="max-width:360px;"></cg-password-input>Import
import { CgPasswordInput } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-password-input';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | "" | Current value |
label | string | "" | Label text |
placeholder | string | "" | Placeholder |
show-strength | boolean | false | Show strength meter |
min-length | number | 0 | Minimum length |
required | boolean | false | Required field |
error | boolean | false | Error state |
success | boolean | false | Success state |
disabled | boolean | false | Disabled state |
Events
| Event | Detail | Description |
|---|---|---|
cg-password-change | {value: string, strength?: number} | Value changed |
cg-password-toggle | {visible: boolean} | Visibility toggled |