Password Input
A password field with a reveal toggle and an optional strength meter that rewards length over symbols — the thing naive meters get wrong when they demand punctuation from a passphrase.
src/components/ui/password-input.tsxAbout
From the component's own source, where it was written.
A password field with a reveal toggle and an optional strength meter.
The toggle is a button, not a checkbox, and it is tabIndex={-1} so Tab goes from the field to the next field rather than through it. Reaching it is a pointer gesture; a keyboard user typing a password does not want a stop between the field and the submit button.
Strength is scored on length and variety only, and the component says so — zxcvbn-style dictionary scoring is a 400 kB dependency and a genuinely different claim. What is here rewards length above all else, which is the one thing the naive meters get wrong when they demand a symbol from a passphrase.
Install
npx astralyx-ui add password-input
Usage
import { PasswordInput } from '@/components/ui/password-input'
<PasswordInput strength autoComplete="new-password" />Composer
Change the props and the source below follows.
<PasswordInput strength={true} size="md" />Examples
With strength
<PasswordInput strength defaultValue="correct horse battery staple" />
API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
PasswordInput
Extends Omit<ComponentProps<'input'>, 'type' | 'size'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | keyof typeof fieldSize | 'md' | — |
| variant | 'default' | 'secondary' | 'ghost' | 'default' | — |
| error | boolean | false | — |
| strength | boolean | false | Adds the meter, wired to the field through aria-describedby. |
| strengthLabel | string | 'Password strength' | Accessible name for the strength meter. |
Functions
| Function | Signature | Description |
|---|---|---|
| scorePassword | (value: string) => number | Exported. Length and variety only — the component says so rather than implying dictionary-based scoring it does not do. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| reveal toggle | tabIndex={-1} | Out of the tab order deliberately: Tab goes field → submit, not through a control a keyboard user does not need. |