Use at least 12 characters. A short sentence works well.
A password field for sign-up and change forms: a show and hide eye that keeps the caret where it was, a four-segment strength meter scored in the browser with penalties for repeats, runs like abc or qwerty, common passwords (leetspeak included), years and the reader's own name or email, and a live checklist of rules whose circles fill and draw a check as each one is met. Caps Lock is flagged while the field has focus, the strength is announced once typing settles, and Safari's password generator is told the rules. `onValidChange` reports when every rule and the minimum score pass; `current-password` turns it into a plain sign-in field.
The import and the props worth knowing about, in one place.
import { FieldPassword } from "@/components/beste/component/field-password";
<FieldPassword
label="Create a password"
userInputs={["hello@beste.co", "Nina Simone"]} // penalized if they appear in the password
onValidChange={(valid) => console.log("Can submit:", valid)}
/>
// Custom rules instead of the default five
<FieldPassword
minScore={3} // 0 to 4
rules={[
{ id: "length", label: "At least 16 characters", test: (v) => v.length >= 16 },
{ id: "space", label: "At least two words", test: (v) => /\S\s+\S/.test(v) },
]}
/>
// Sign-in: no meter, no checklist
<FieldPassword name="password" autoComplete="current-password" tone="muted" size="lg" />
// The scorer on its own
import { scorePassword } from "@/components/beste/component/field-password";
console.log(scorePassword("correct horse battery staple").label);Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Type | The meter and the checklist update with every key; the strength is announced once typing settles. |
|---|---|
| Eye button | Shows or hides the password; with a pointer the caret stays where it was. |
| Caps Lock | A warning appears under the field while it has focus. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | |
description | string | — | |
value | string | — | |
defaultValue | string | — | |
onValueChange | (value: string) => void | — | |
onValidChange | (valid: boolean) => void | — | Fires when the password starts or stops passing every rule and the minimum score. |
rules | PasswordRule[] | false | — | Rules shown as a checklist. Defaults to length, lower and upper case, a number and a symbol. `false` hides the list. |
minLength | number | — | Length the default length rule asks for. |
minScore | number | — | Lowest strength score that counts as valid, 0 to 4. |
userInputs | string[] | — | Details the password should not contain, such as the email or the name. |
showStrength | boolean | — | Meter under the field. Off by default for `current-password`. |
autoComplete | "new-password" | "current-password" | — | "new-password" (default) for sign-up and change forms, "current-password" for sign-in. |
name | string | — | |
id | string | — | |
placeholder | string | — | |
required | boolean | — | |
disabled | boolean | — | |
tone | "muted" | "outline" | "ghost" | — | |
size | "sm" | "default" | "lg" | — | |
className | string | — |