KQ-1162 · VAULT/PASSWORD

Vault Password

A new-password field beside a vault door seen from the inside, one bolt per strength rule: meeting a rule shoots its bolt across the seam into the frame on snap with a thock as it hits its stop, and breaking it pulls the bolt back on glide, the linkage arms following every frame. With every bolt home the wheel spins a turn and a quarter on drift, clicking as its spokes pass, then the latch turns in the hub on flick and the lamp lights; the show/hide control is a peephole whose shutter swings aside on snap. The input, its label, hint, error and rules list are real form semantics, and a polite status speaks once per change of rule state.

KQ-1162 · VAULT/PASSWORD

New password

12 or more characters, not met yet
A lowercase letter, not met yet
An uppercase letter, not met yet
A number, not met yet

A phrase you'll remember works well.

0 of 4 bolts home · door open

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/vault-password

Props

label: string; default "Password"; What the password is for: the visible label and the input's accessible name.
value / defaultValue: string; default ""; Controlled or initial password.
onValueChange: (value: string) => void; default —; Fires with the new password on every edit.
rules: number; default 4; How many rules the door enforces, taken in order, 3 to 6: one bolt each.
checks: VaultRule[]; default 12+ characters, lowercase, uppercase, a number, a symbol, not a common password; The rules to take them from, each { id, label, test }.
door: "steel" | "brass" | "matte"; default "steel"; The metal of the door, its frame and the peephole shutter.
spin: boolean; default true; Spin the wheel before the latch drops once every bolt is home; off, the latch drops as the last bolt lands.
onLockedChange: (locked: boolean) => void; default —; Fires from the edit that shot the last bolt home (true) or pulled one back from a locked door (false).
name: string; default —; The form field name of the native input.
hint: string; default —; Helper text under the field, wired with aria-describedby.
error: string | null; default —; What is wrong, from the host: shown under the field, marked with aria-invalid, and announced once.
placeholder: string; default —; The input's placeholder.
autoComplete: string; default "new-password"; The input's autocomplete token.
required: boolean; default false; Marks the input required.
sound: boolean; default false; Play the bolts' thocks, the wheel's clicks and the shutter. Nothing plays, and no audio context exists, unless this is on; sounds only ever answer the visitor.
disabled: boolean; default false; Disables the field and dims it.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
label	string	"Password"	What the password is for: the visible label and the input's accessible name.
value / defaultValue	string	""	Controlled or initial password.
onValueChange	(value: string) => void	—	Fires with the new password on every edit.
rules	number	4	How many rules the door enforces, taken in order, 3 to 6: one bolt each.
checks	VaultRule[]	12+ characters, lowercase, uppercase, a number, a symbol, not a common password	The rules to take them from, each { id, label, test }.
door	"steel" \| "brass" \| "matte"	"steel"	The metal of the door, its frame and the peephole shutter.
spin	boolean	true	Spin the wheel before the latch drops once every bolt is home; off, the latch drops as the last bolt lands.
onLockedChange	(locked: boolean) => void	—	Fires from the edit that shot the last bolt home (true) or pulled one back from a locked door (false).
name	string	—	The form field name of the native input.
hint	string	—	Helper text under the field, wired with aria-describedby.
error	string \| null	—	What is wrong, from the host: shown under the field, marked with aria-invalid, and announced once.
placeholder	string	—	The input's placeholder.
autoComplete	string	"new-password"	The input's autocomplete token.
required	boolean	false	Marks the input required.
sound	boolean	false	Play the bolts' thocks, the wheel's clicks and the shutter. Nothing plays, and no audio context exists, unless this is on; sounds only ever answer the visitor.
disabled	boolean	false	Disables the field and dims it.
className	string	—	Merged onto the root element's classes.