Password
PasswordInput is a password field with a show / hide button, a Caps Lock note and an optional strength meter.
type="password" and a show / hide button (a toggle button with aria-pressed; clicking it keeps focus in the field). When Caps Lock is on while typing, a note appears under the field and is read through a live region. strength adds a four-step meter (Weak, Fair, Good, Strong) with a text label, so it doesn't rely on color; getPasswordStrength scores by length and character variety, or pass your own scoring function. Takes every Input prop and works inside <Field>; built-in strings change through messages.passwordInput.Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
// npm install yugen-uiimport { PasswordInput, getPasswordStrength, type PasswordStrength } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Strength meter
strength uses getPasswordStrength; the level is announced when it changes.
Your own scoring
Return 0–4 from your own rules; capsLockWarning={false} turns the Caps Lock note off.
Size, appearance & disabled
As on Input; defaultVisible shows the password from the start.
Usage
- Set
autoComplete: "current-password" to sign in, "new-password" to create one, so password managers can fill and suggest. - Put the password rules in the Field
hint, before people start typing. - Check the real strength on the server; the meter is a quick hint.
- Don't block pasting into a password field. People using a password manager need it.
- Don't rely on the meter's color alone; keep the text label.
Props
| Prop · Type | Default | Description |
|---|---|---|
| visible / defaultVisibleboolean | Default: false | Whether the password shows as text (controlled / uncontrolled). |
| onVisibleChange(visible: boolean) => void | Default: — | Called when the show / hide button is pressed. |
| capsLockWarningboolean | Default: true | Shows a note when Caps Lock is on while typing. |
| strengthboolean | (password: string) => PasswordStrength | Default: — | Strength meter: true uses getPasswordStrength, or pass a function that returns 0–4. |
| getPasswordStrength(password: string) => PasswordStrength | Default: — | 0 empty · 1 weak · 2 fair · 3 good · 4 strong, by length and character variety. |
| value / defaultValue / onChange— | Default: — | As on Input. |
| label / hint / validationState / validationMessage— | Default: — | As on Input; or wrap it in <Field>. |
| size / appearance / contentBefore / contentAfter— | Default: — | As on Input; contentAfter sits after the show / hide button. |
| rootClassNamestring | Default: — | Class for the outer wrapper (field, meter, note). |
| refRef<HTMLInputElement> | Default: — | Points to the <input> element. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.passwordInput
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| showstring aria-label nút hiện / ẩn mật khẩu (nút bật tắt, | Default (English)"Show password" | messagesVi"Hiện mật khẩu" |
| capsLockstring Nhắc khi Caps Lock đang bật lúc gõ. | Default (English)"Caps Lock is on" | messagesVi"Caps Lock đang bật" |
| strengthstring Nhãn của thước đo độ mạnh. | Default (English)"Strength" | messagesVi"Độ mạnh" |
| weakstring Bốn mức của | Default (English)"Weak" | messagesVi"Yếu" |
| fairstring | Default (English)"Fair" | messagesVi"Trung bình" |
| goodstring | Default (English)"Good" | messagesVi"Khá" |
| strongstring | Default (English)"Strong" | messagesVi"Mạnh" |