Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA password field that warns when Caps Lock is on, read from key events, announced politely, linked to the field and gone on blur or when the key is toggled off.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this on every sign-in and password entry form. Caps Lock is the most common reason a correct password fails.
Do not show it for fields where letters are not hidden, or rely on it where users type on touch keyboards (it will not fire).
It builds on input and label, which the CLI installs for you.
import { PasswordCapsLockWarning } from "@/components/password-caps-lock-warning"<PasswordCapsLockWarning label="Password" autoComplete="current-password" />| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Password | Visible label. |
autoComplete | string | current-password | Autocomplete token. |
...input props | Input props | - | Passed to the input (not type or id). |
getModifierState("CapsLock") on key events, so it is only known after the first key press.role="status" element referenced by aria-describedby, so it is read with the field and announced when it appears.onKeyDown, onKeyUp and onBlur handlers still run.| Key | Action |
|---|---|
| Type | the warning appears if Caps Lock is on |
| Caps Lock | toggling it off hides the warning |
The pattern ships a Testing Library test (password-caps-lock-warning.test.tsx) that covers the initial state, the warning and its link, turning it off and blur with handler pass-through.